CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）

最新推荐文章于 2025-03-18 22:30:33 发布

左手写爱等等

最新推荐文章于 2025-03-18 22:30:33 发布

阅读量2.8w

点赞数 7

文章标签： CSS/CSS3居中解析 CSS/CSS3水平居中解析 CSS/CSS3垂直居中解析 CSS/CSS3垂直+水平居中解析

本文链接：https://blog.youkuaiyun.com/qq_35788269/article/details/80691114

版权

CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）

今天，博主带来的是CSS3/CSS中的居中解析，相信小伙伴们有时候也会被各种居中搞的一脸懵逼把！

居中总体来说可以分为水平居中还有垂直居中，正中央，顾名思义，定义这里就不解释了！

首先，我们来看下垂直居中：

（1）、如果是单行文本，则可以设置的line-height的数值，让其等于父级元素的高度！

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  .box{ 
 
 
  background: 
  green; 
 
 
  height: 
  200px; 
 

   } 
 
 
  a { 
  height: 
  100%; 
 
 
  line-height: 
  200px; 
 
 
  color: 
  red; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  class= 
  "box" 
  > 
 
 
  < 
  a 
  href= 
  "" 
  >ggg 
  </ 
  a 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 

（2）、如果元素是行内块级元素，一般会使用diaplay:inline-block,vertical-align:middle，还有一个伪元素让元素内容处于容器中央！给父元素添加伪元素！

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  .box { 
 
 
  background: 
  green; 
 
 
  height: 
  200px; 
 

   } 
 
 
  .box::after, .box2{ 
 
 
  display: 
  inline-block; 
 
 
  vertical-align: 
  middle; 
 

   } 
 
 
  .box::after{ 
 
 
  content: 
  ''; 
 
 
  height: 
  100%; 
 

   } 
 
 
  .box2{ 
  background-color: 
  red; 
  width: 
  20px; 
  height: 
  20px;} 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  class= 
  "box" 
  > 
 
 
  < 
  div 
  class= 
  "box2" 
  ></ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 
 
  
 
 

（3）、通过display：flex来实现垂直居中；

父级：display：flex；

子元素：align-self：center；

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  .box { 
 
 
  background: 
  green; 
 
 
  height: 
  300px; 
 
 
  width: 
  600px; 
 
 
  display: 
  flex; 
 
 
 

   } 
 
 
  .box2{ 
  background: 
  red; 
 
 
  width: 
  30%; 
 
 
  height: 
  30%; 
 
 
  align-self: 
  center; 
 


   } 
 
 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  class= 
  "box" 
  > 
 
 
  < 
  div 
  class= 
  "box2" 
  ></ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 