前端 面试 html css 如何让一个盒子水平垂直居中？
方法1 使用子绝父相 定位 推荐
说明：
让父元素相对定位，因为要让子元素以父元素为参考对象，如果父元素不设置定位，子元素的参考对象就是整个页面document；
子元素绝对定位，top：50%；left：50%;都是相对父元素的高宽的50%设置的；最后一步分为2中实现代码：已知子元素高宽 和 未知子元素高宽；
已知高宽：matgin-top:- height / 2; margin-left:- width / 2;
未知高宽：transform: translate( - 50% , - 50%); 位移：translate (x , y) ; x， y 是百分比时是自己高宽的百分比；
效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
.child {
position: absolute;
top: 50%;
left: 50%;
/* 已知子元素的宽高 高度 宽度的一半给上、左边距 注意是负数 */
margin-top: -50px;
margin-left: -50px;
/* 未知子元素宽高 */
/* transform: translate(-50%, -50%); */
width: 100px; //注 ：使用位移时宽高可以不设置
height: 100px; //
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 盒子水平垂直居中 -->
<div class="parent">
父元素相对定位
<div class="child">子元素绝对定位</div>
</div>
</body>
</html>
方法二 子绝父相 定位 定位值取 0 margin：auto
说明： 让子元素四个方向的定位 l ，r ，t ，b 都为0，此时小盒子还位于原位，使用margin: auto让他上和下，左和右的外边距保持一致。由于小盒子四个方向的定位值都为0，所以会自动将小盒子拉到正中间。但是子盒子的高宽必须已知 ， 如果不给子元素高宽 ，子元素会铺满父元素。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
/* 父元素相对定位 */
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
.child {
/* 子元素绝对定位 */
position: absolute;
margin: auto;
width: 100px;
height: 100px;
/* 四个方位值 为 0 */
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 盒子水平垂直居中 -->
<div class="parent">
父元素相对定位
<div class="child">子元素绝对定位</div>
</div>
</body>
</html>
方法三：利用 display : table-cell
知识储备：
关于 text-align:center; text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。cneter参数让把文本排列到中间。 单纯地看这句话你可以知道该属性可以让文本居中显示，但是除此之外，该属性还可以让父元素为块元素的行内元素或行内块元素居中显示。
关于table-cell：
display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。
<style> .fa { display: table-cell; /* 垂直居中 */ vertical-align: middle; /* 水平居中 */ text-align: center; width: 400px; height: 400px; background-color: pink; } .son {
/* 行内块显示 */ display: inline-block; width: 100px; height: 100px; background-color: lime; } </style> </head> <body> <div class="fa"> <div class="son"></div> </div> </body>
方法四：利用 flex 布局 display : flex
flex布局 特点：灵活、快速、简单、但是兼容性差。flex布局是浏览器提倡的布局模型、避免浮动脱标的问题
组成部分：
弹性容器：父元素
弹性盒子：子元素
设置方式：给父元素添加display：flex；，子元素可以自动的挤压或拉伸。有主轴（justify-content:xxx）控制；侧轴(align-items:xxx)；
align：排列：校准；使一致； items：项目； justify：使对齐；conten：内容
<style> .parent { /* flex布局 */ display: flex; /* 水平(主轴)居中 */ justify-content: center; /* 垂直(侧轴居中) */ align-items: center; width: 500px; height: 500px; background-color: pink; } .child { width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <!-- 盒子水平垂直居中 --> <div class="parent"> <div class="child"></div> </div> </body>
