flex垂直居中_CSS实现居中

大家好，我是讯享网，很高兴认识大家。

一、水平居中
1.1 要居中的是内联元素或者行内-块级元素？（比如文字或链接）
块级父元素设置text-align为center则其内内联元素水平居中。This will work for inline, inline-block, inline-table, inline-flex, etc.
1.2 要居中的是块级元素？
设定了宽度的块级元素（不设定宽度将会自动铺满那就不需要水平居中啦）：把该元素的margin-left和 margin-right 都设置成auto来实现水平居中。
1.3 一行内不止一个块级元素？
1.3.1 如果在一行内有两个或多个块级元素需要水平居中，得为它们设置不同的display类型。/* 方法1-将这些块级元素设置display为inline-block，再将其父容器设置text-align为center*/ /* 方法2-直接给父容器设置成flex布局，再将justify-content属性设置成center*/
1.3.2 如果是多个块级元素依次堆在上一个的顶部，那margin auto策略还是奏效的。

二、垂直居中
2.1 要居中的是内联元素或者行内-块级元素？（比如文字或链接）
2.1.1 是单行？
2.1.1.1单行的内联元素只需将上下padding设置成等值就可以实现垂直居中。
2.1.1.2 在某些不能使用padding的情况下，并确定是不换行的文本，则可以使用line-height等于height的方法来使单行文本内容垂直居中。
2.1.2 是多行？
2.1.2.1 给多行文本设置上下等大的padding也可以使其垂直居中。但如果此法不奏效，则有可能是文字在的元素成了table cell，这时候就要用vertical-align来解决问题。
2.1.2.2 如果table-like已经过时不用了，用flexbox是更佳方案。一个flex-child可以很容易在flex-parent里实现居中（父容器必须有个固定高度px、%等）。
2.1.2.3 除去以上两种方法，你还可以使用幽灵元素技巧"ghost element" technique，在这种技术中，容器内放置一个完全高度的伪元素，并且文本与此垂直对齐。
2.2 要居中的是块级元素？
2.2.1 该块级元素高度已知
你明确知道元素的高度，则可以像下面这样来垂直居中：/* 元素相对其父容器顶部50%的位置 */ / * 元素的margin-top设置为负(自身height*0.5)*/
2.2.2 该块级元素高度未知
相对父容器顶部50%定位，再纵向回移自身高度的50%即tramsform: translateY(-50%)，即可实现垂直居中。
2.2.3 是否介意该元素撑开其父容器高度？
如果不介意，那只需使用tables或CSS display使元素变成tables再使vertical-align为middle就能实现垂直居中。
2.2.4 你要用flexbox吗？
使用flex布局可以很轻松实现垂直居中：align-items: center;
或者通过flex-direction: column;将默认横向的主轴改为垂直方向，起点在上沿。并justify-content: center;也可以。

三、垂直水平居中
3.1 该元素的宽高固定吗？
在将元素绝对定位为top: 50%; left: 50%;后，可以使用值为宽的一半和高的一半的负margin实现垂直水平居中。（跨浏览器支持很不错）
3.2 该元素宽高未知？
（1）如果宽高未知，在将元素绝对定位为top: 50%; left: 50%;后，可以使用transform属性来做负的50%移动（基于当前元素宽高）。
（2）也可以元素相对父容器绝对定位(left: 0;right: 0;top: 0;bottom: 0;)并margin: auto，不需要提前知道尺寸兼容性好。
3.3 你要用flexbox吗？
对flexbox进行垂直水平居中，只需设置两个属性为center: align-items、justify-content。
3.4 你要用grid布局吗？
父容器设置为grid布局后，子元素直接margin: auto;即可实现垂直水平居中。

讯享网

一、水平居中

1.1 要居中的是内联元素或者行内-块级元素？（比如文字或链接）

块级父元素设置text-align为center则其内内联元素水平居中。This will work for inline, inline-block, inline-table, inline-flex, etc.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>块级父元素内的行内元素居中</title>
  <style>
    body {
  
  
  
  
  
  
  
    
   background: #f06d06; } header, nav { 
  
    
   text-align: center; /* 块级父元素设置text-align为center则其内内联元素水平居中*/ background: white; margin: 20px 0; padding: 10px; } nav a { 
  
    
  
      text-decoration: none;
      background: #333;
      border-radius: 5px;
      color: white;
      padding: 3px 8px;
    }
  </style>
</head>
<body>
  <header>
    This text is centered.
  </header>

  <nav role='navigation'>
    <a href="#0">One</a>
    <a href="#0">Two</a>
    <a href="#0">Three</a>
    <a href="#0">Four</a>
  </nav>  
</body>
</html>

讯享网

flex垂直居中_CSS实现居中

相关推荐