CSS布局之水平垂直居中

来源：互联网发布：windows grub 修复系统编辑：程序博客网时间：2024/05/16 10:29

水平垂直居中的布局在编程中经常遇到，在此总结一下水平垂直居中的方法。

方法一: 子元素绝对定位，left、right、top、buttom都设为0 margin为auto

<div class="container">    <div class="box"></div></div>.container{    border:1px solid black;    width:300px;    height:300px;    position:relative;}.box{    border:1px solid red;    width:50px;    height:50px;    position:absolute;    left:0;    right: 0;    top:0;    bottom:0;    margin:auto;}

方法二：子元素绝对定位，left值 top值设为50%，另外设置margin-left和margin-top值为负的元素属性width、height值的一半

.container{    border:1px solid black;    width:300px;    height:300px;    position:relative;}.box{    border:1px solid red;    width:50px;    height:50px;    position:absolute;    left:50%;    top: 50%;    margin-left:-25px;    margin-top:-25px;}

方法三：子元素绝对定位，left值 top值设为50%，另外设置transform:translate(-50%,-50%);

.container{    border:1px solid black;    width:300px;    height:300px;    position:relative;}.box{    border:1px solid red;    width:50px;    height:50px;    position:absolute;    left:50%;    top: 50%;    transform: translate(-50%,-50%);}

方法四：flex布局方法：设置容器的布局方式为display：block，同时设置子元素的margin：auto

#container{    border: 1px solid red;    width: 500px;    height: 500px;    display: flex;}#box{    margin: auto;    border: 1px solid red;    width: 100px;    height: 100px;}

0 0