在flexbox中均匀地垂直和水平对齐单选按钮

在Flexbox布局中，均匀地垂直和水平对齐单选按钮可以通过设置容器的display属性为flex，并使用justify-content和align-items属性来实现。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Align Radio Buttons</title>
    <style>
        .container {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 设置容器高度为视口高度 */
        }
        .radio-group {
            display: flex;
            flex-direction: column; /* 垂直排列单选按钮 */
            gap: 10px; /* 设置单选按钮之间的间距 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="radio-group">
            <input type="radio" id="option1" name="options" value="1">
            <label for="option1">Option 1</label>
            <input type="radio" id="option2" name="options" value="2">
            <label for="option2">Option 2</label>
            <input type="radio" id="option3" name="options" value="3">
            <label for="option3">Option 3</label>
        </div>
    </div>
</body>
</html>

基础概念

Flexbox：Flexbox（Flexible Box）是一种用于创建灵活布局的CSS模块。它通过设置容器的display属性为flex，使得子元素可以在容器中进行灵活的对齐和分布。
justify-content：用于设置Flex容器中子元素在主轴（水平方向）上的对齐方式。
align-items：用于设置Flex容器中子元素在交叉轴（垂直方向）上的对齐方式。