CSS3 水平居中和垂直居中方式整合
阿新 • • 發佈：2018-12-21
wid pla 圖片 inf ont round bubuko relative 得出
實現居中的方式分為水平和垂直，接下來對兩種方式進行整體的整合
水平居中
水平居中需要滿足兩個條件：父級元素為塊級元素且設置寬度
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; }
效果如圖：
CSS3 水平居中和垂直居中方式整合