CSS3 水平居中和垂直居中方式整合 -数据天堂

CSS3 水平居中和垂直居中方式整合

# 前端 2024-04-03 15:16 0 11 来源：数据天堂

实现居中的方式分为水平和垂直，接下来对两种方式进行整体的整合

水平居中

水平居中需要满足两个条件：父级元素为块级元素且设置宽度

1.子元素为任意元素，但未设置宽度

<body> <div class="wrap"> <p class="center">快把我变居中<p/> </div> </body>

.wrap{ width:300px; height:300px; 
 background:gray;}.center{ text-align:center; }

效果如下图：

2.子元素为任意元素，并设定了宽度

margin

<body> <div class="wrap"> <p class="center">margin<p/> </div> </body>

.wrap{ width:300px; height:300px;
 background:gray; }.center{ margin:0 auto; 
　　　width:100px;
 }

效果图如下：

padding-left和padding-right

我们还可以通过计算父元素和子元素宽度之差，（父宽-子宽）/2，得出父元素的padding-left或者padding-right

<div class="wrap"> <div class="center">快把我变居中</div></div></body>

.wrap{ width:300px; height:300px; background: gray; box-sizing: border-box; padding-left: 100px;}.center{ color: beige; box-sizing: border-box; width: 100px;}

效果如图:

计算子元素的margin-left或margin-right

计算子元素的方式和计算父元素的方式相同

<div class="wrap"> <div class="center">margin-left</div></div>

.wrap{ width:300px; height:300px; background: gray; box-sizing: border-box;}.center{ color: beige; box-sizing: border-box; width: 100px; margin-left: 100px;}

效果如图：

使用定位

<div class="wrap"> <div class="center">margin-left</div></div>

.wrap{ width:300px; height:300px; background: gray; box-sizing: border-box; position: relative;}.center{ color: beige; box-sizing: border-box; position: absolute; left: 50%; margin-left: -50px; width: 100px;}

效果如图：

flex

<body><div class="wrap"> <div class="center">flex</div></div></body>

.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; box-sizing: border-box; display: flex; justify-content: center; flex-direction: row;}.center{ width:100px ; height: 100px; box-sizing: border-box; background: #6495ed; color: #fff;}

垂直居中

1.子元素为块级元素，宽高设定了

计算父元素的padding-top或padding-bottom

<body><div class="wrap"> <div class="center">margin-top</div></div></body>

.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; box-sizing: border-box; padding-top: 100px;}.center{ width:100px ; height: 100px; box-sizing: border-box; background: #6495ed; color: #fff;}

效果如图：

计算子元素的margin-top或margin-bottom

<body><div class="wrap"> <div class="center">position</div></div></body>

.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; box-sizing: border-box;}.center{ width:100px ; height: 100px; box-sizing: border-box; background: #6495ed; margin-top: 100px; color: #fff;}

定位

<body><div class="wrap"> <div class="center">padding-top</div></div></body>

.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; box-sizing: border-box; position: relative;}.center{ position: absolute; width:100px ; height: 100px; box-sizing: border-box; background: #6495ed; color: #fff; top: 50%; margin-top: -50px;}

效果如图：

flex

<body><div class="wrap"> <div class="center">position</div></div></body>

.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; box-sizing: border-box; display: flex; justify-content: center; flex-direction: column;}.center{ width:100px ; height: 100px; box-sizing: border-box; background: #6495ed; color: #fff;}