CSS常用九种方式实现垂直居中-外链论坛

qzmjef 发表于 2024-6-30 05:17:23

CSS常用九种方式实现垂直居中

倘若 .parent 的 height 不写，你只必须 padding: 10px 0; 就能将 .child 垂直居中；
倘若 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的办法。
敬告：能不写 height 就千万别写 height。
以下的办法都围绕着该HTML展开
HTML代码
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent">

 <div class="child">
 垂直居中

 </div>
 </div>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1、table自带功能</h3>
css
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 border: 1px solid red;
 height: 600px;
 }

 .child{
 border: 1px solid green;
 }
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2、absolute + 负margin</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 height: 600px;
 border: 1px solid red;
 position: relative;
 }
 .child{
 border: 1px solid green;
 width: 300px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -150px;
 margin-top: -50px;
 }
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">3、absolute + translate(-50%,-50%)</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 height: 600px;
 border: 1px solid red;
 position: relative;
 }
 .child{
 border: 1px solid green;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 }
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">4、absolute; + margin: auto;</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 height: 600px;
 border: 1px solid red;
 position: relative;
 }
 .child{
 border: 1px solid green;
 position: absolute;
 width: 300px;
 height: 200px;
 margin: auto;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 }
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">5、display: flex; </h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 height: 600px;
 border: 3px solid red;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 .child{
 border: 3px solid green;
 width: 300px;
 }
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">6、inline-block+vertical-aligin</h3>
必定要设置行高，否则不生效
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 height: 600px;
 border: 3px solid red;
 text-align:center;
 line-height:600px;
 }
 .child{
 border: 3px solid green;
 width: 300px;
 line-height:100px;
 display:inline-block;
 vertical-align:middle;
 }
</div>
7、table-cell
<div style="color: black; text-align: left; margin-bottom: 10px;">vertical-align 属性设置一个元素的垂直对齐方式。
 该属性定义行内元素的基线相针对该元素所在行的基线的垂直对齐。
 准许指定负长度值和百分比值。这会使元素降低而不是上升。
 在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 border: 1px solid red;
 height: 600px;
 width:300px;
 display: table-cell;
 vertical-align: middle;//垂直
 text-align:center;//水平
 }
 .child{
 height: 200px;
 width:100px;
 border: 1px solid black;
 display:inline-block;

 }
</div>
8、grid网格布局
<a style="color: black;">参考grid</a>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 border: 1px solid red;
 height: 600px;
 width:30
</div>

time 发表于 2024-8-25 00:58:05

外贸B2B平台有哪些？

流星的美 发表于 2024-8-25 02:53:13

论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上，我们要把这种精神传递下去。

情迷布拉格 发表于 2024-9-9 14:08:33

外链发布社区 http://www.fok120.com/

qzmjef 发表于 2024-9-29 13:29:13

论坛外链网http://www.fok120.com/

j8typz 发表于 2024-10-5 05:23:35

你的努力一定会被看见，相信自己，加油。

页: [1]

外链论坛's Archiver

CSS常用九种方式实现垂直居中