[CSS]水平垂直居中方案
2021-04-14 10:27
标签：身高 block ems ext 常用 idt relative latex 针对 简单总结一下常用的水平垂直居中方案 直接在父级元素设置 text-align 和 line-height ,针对未浮动的行内元素 在父级设置 line-height ，在本身设置 margin 值和 transform 属性，针对已浮动的行内元素 通过定位，这种方案是比较常用的手段，不区分是否浮动，前提是父级有宽高。 块级元素在父级设置 position: relative; 在本身设置 position: absolute; 行内元素，父级设置和上面一样，本身设置如下： 推荐方案：flex布局 [CSS]水平垂直居中方案 标签：身高 block ems ext 常用 idt relative latex 针对 原文地址：https://www.cnblogs.com/feng-fengfeng/p/12376701.html1 div class="box">
2 span class="item">我是span标签span>
3 div>
1 .box {
2 width: 600px;
3 height: 400px;
4 margin: 50px auto;
5 border: 1px solid red;
6
7 line-height: 400px;
8 text-align: center;
9 }
1 .item {
2 float: left;
3 margin-left: 50%;
4 transform: translateX(-50%);
5 }
1 .box {
2 width: 600px;
3 height: 400px;
4 margin: 50px auto;
5 border: 1px solid red;
6 position: relative;
7 }
1 .item {
2 display: block;
3 width: 100px;
4 height: 100px;
5 color: white;
6 background: #000;
7
8 /* 方案一 */
9 position: absolute;
10 left: 50%;
11 top: 50%;
12 margin-left: -50px; /* 值为本身宽度的一半 */
13 margin-top: -50px; /* 值为本身高度的一半 */
14 /* transform: translate(-50%, -50%); 可以代替margin，IE9以下不支持 */
15
16 /* 方案二 */
17 top: 0;
18 left: 0;
19 bottom: 0;
20 right: 0;
21 margin: auto;
22 }
1 .item {
2 position: absolute;
3 position: absolute;
4 left: 50%;
5 top: 50%;
6 transform: translate(-50%, -50%);
7 }
1 .box {
2 width: 600px;
3 height: 400px;
4 margin: 50px auto;
5 border: 1px solid red;
6
7 display: flex;
8 justify-content: center;
9 align-items: center;
10 }