1. Home
  2. 综合讨论
  3. 水平垂直居中布局的总结

水平垂直居中布局的总结

  • icewing

    关于水平垂直居中布局

    简单说就是将之前水平、垂直居中的整合

    解决方案

    1. table + margin 实现水平居中，table-cell + vertical-algin 实现垂直居中
    2. absolute + transform 实现水平、垂直居中

    第一种

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中的方案</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .parent {
            width: 600px;
            height: 600px;
            background: #999;
			display: table-cell;
			vertical-align: middle;
        }
        
        .child {
            width: 200px;
            height: 200px;
            background: red;
			display: block;
			margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- 父级容器 -->
    <div class="parent">
        <!-- 子级元素 -->
        <div class="child">

        </div>
    </div>
</body>

</html>
    • 这里为了语义化，将child的display设置为block

    第二种

    沿用上方的代码，只改动css

            * {
            padding: 0;
            margin: 0;
        }
        
        .parent {
            width: 600px;
            height: 600px;
            background: #999;
			position: relative;
        }
        
        .child {
            width: 200px;
            height: 200px;
            background: red;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
        }
    • 此种方法如果要兼容老版本游览器请注意transform属性
    0
css 4 html 3
Log in to reply
 

更多推荐主题