Share 7 ways to achieve vertical centering using CSS-CSS Tutorial-php.cn

Share 7 ways to achieve vertical centering using CSS

高洛峰

Release： 2017-03-21 17:10:54

Original

1608 people have browsed it

Today, my blog application was approved. Let me tell you about the various methods I have seen to achieve vertical centering using pure CSS. Why make this the first article? Because this is the most useful knowledge I learned when I first started working with front-end, I hope everyone can benefit from it too!

Implementing horizontal centering in CSS is very simple. Inline elements set the text-align:center of their parent elements, and block-level elements apply magrin:auto to themselves. However, achieving vertical centering is a bit troublesome. First of all, it is an extremely common requirement. It seems simple, but in practice, it is often difficult to achieve, especially when the design size is not fixed. The following are some methods I found:

Method 1: Line-heightline-height

(1) Single line text centered

HTML code

<p class="box1">
<p class="box2">垂直居中</p>
</p>

Copy after login

CSS code

 .box1{
   height: 200px;
 }
 .box2{
  line-height: 200px;
 }

Copy after login

(2)PictureVertically centered

HTML code

 <p class="box1">
   <img src="images/bg-sun.png" alt="">
 </p>

Copy after login

CSS code

 .box1{
   line-height:200px;
 }
 .box1 img{
   vertical-align: middle;
 }

Copy after login

Method two: table-cell

CSS code

 .box1{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }

Copy after login

Method three: display:flex

(1) CSS code

 .box1{
   display: flex;
 }
 .box2{
   margin:auto;
 }

Copy after login

(2) CSS code

 .box1{
   display: flex;
   justify-content:center;
   align-items:center;
 }

Copy after login

Method 4: Absolute positioningAnd negative margin

(1) CSS code

 .box1{ 
   position: relative; 
 } 
   .box2{ 
   position: absolute; 
   top: 50%; 
   left: 50%; 
   margin-top: -10px;/*减去子元素高度一半*/ 
   margin-left:-32px;/*减去子元素宽度一半*/
 }

Copy after login

(2)CSS code

 .box2{
   position: absolute;
   top:calc(50% - 10px);/*减去子元素高度一半*/
   left:calc(50% - 32px);/*减去子元素宽度一半*/
 }

Copy after login

Method five: Absolute positioning and 0

CSS code

 .box2{
   width: 50%;
   height: 50%;
   background: #555;
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
     }

Copy after login

Method six: translate

(1) CSS code

 .box2{
   position: absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
 }

Copy after login

(2) HTML code

 <body>
 <p class="box1">
 </p>
 </body>

Copy after login

CSS code

 .box1{
   width: 200px;
   height: 200px;
   background: #666;
   margin: 50vh auto 0;
   transform: translateY(-50%);
 }

Copy after login

Method seven: display:-webkit-box

CSS code

 .box2{
   display: -webkit-box;
   -webkit-box-pack:center;
   -webkit-box-align:center;
   -webkit-box-orient: vertical;
   text-align: center7 }

Copy after login

The above is the detailed content of Share 7 ways to achieve vertical centering using CSS. For more information, please follow other related articles on the PHP Chinese website!