CSS 水平居中/布局 垂直居中 （月经问题）

水平居中

1. 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现。

  <p style = " text-align:center; width:300px; background-color:pink;">妈妈再也不担心我的学习了</p>

2.如果它是一个块级元素：

A. margin 方法

    <div style="background-color: greenyellow; ">
        <div style="margin:0 auto; width: 300px;background-color: gold;">
            我是一只小小鸟，飞啊飞啊，我的骄傲放纵。
        </div>
    </div>

B. table布局：水平布局，但也可以实现让某块级元素水平居中的效果。

    <table style="table-layout:fixed;border:2px solid black;width:100%; ">
        <colgroup>
            <col span="1" style="width: 25%;">
            <col span="1" style="width: 50%;">
            <col span="1" style="width: 25%;">
        </colgroup>
        <tbody>
            <td style="background-color:green;">green</td>
            <td style="background-color:red;">red</td>
            <td style="background-color:blue;">blue</td>
        </tbody>
    </table>

C. flex 盒子：这里主要演示块级元素的情况，它也可在行内元素里使用。是现在比较流行的一种水平布局的方式。
行内元素中： display : inline-flex;
在webkit内核中： display : -webkit-flex;

<div style="display: flex; flex-flow: row nowrap; justify-content: center; background-color: darkgrey;  height: 50px;">
        <div style="flex:0 1 auto;  background-color: orange;">A</div>
        <div style="flex:0 1 50px;  background-color: blueviolet; ">B </div>
        <div style="flex:0 1 auto;  background-color: gray; ">C </div>
</div>

父元素：
flex-flow: flex-drection||flex-wrap;
flex-direction: row（左→右）;
flex-wrap:nowrap(不折行);

justify-content(主轴对齐方式）:center;
子集：
flex:flex-grow(项目放大比例） flex-shrink（项目缩小比例） flex-basis（为项目预留的空间，个人认为它可实现width的功能）;

关于flex的详细学习，大家可以看这两篇文章，写的很赞哦。
https://demo.agektmr.com/flexbox/
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

垂直居中

1. 绝对定位的垂直居中的方法

A.
```
main {
position: absolute;
top: calc(50% - 4em);
left: calc(50% - 6em);
width: 12em;
height: 8em;
background-color: aqua;
}

<main>
    <h1>hello word!</h1>
    <p>Center </p>
</main>
```
这个方法固定了高度和宽度，不是由内容来决定的。现在我们对代码稍微改进一下。

B.
```
main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: yellow;
}

<main>
    <h1>hello word!</h1>
    <p>Center </p>
</main>

```
这里用transform:translate();巧妙的让main居中了，但是在过多会溢出页面。

1. 不使用绝对定位时

        main {
        width: 12em;
        padding: 1em 1.5em;
        background-color: darkgoldenrod;
        margin: 50vh auto 0;
        transform: translateY(-50%);
    }

    <main>
        <h1>hello word!</h1>
        <p>Center </p>
    </main>
    

这个满足了我们让块级元素垂直居中的基本要求，但是这个技巧的实用性是有限的，它只适用于在视口居中的情况。

1. flex

 .contain {
     display: flex;
     flex-flow: row nowrap;
     justify-content: center;
     align-content: center;
     align-items: center;
     height: 400px;
     background-color: darkkhaki;
     /*height: 100vh;*/
 }
 .son{
     flex: 0 1 auto;
     align-self: center;
     background-color:darkviolet;
 }
 
 <div class="contain">
     <div class="son">
         <h1>hello word!</h1>
         <p>Center </p>
     </div>
 </div>

它不仅仅可以在视口中垂直居中，还可以在其他块级元素内垂直居中。
相对flex有更深的了解，可以去看一下前面的两个链接里的内容。

感谢阅读，喜欢请点赞，有问题可以留言。以上内容参考了《CSS揭秘》这本书，一本有趣的CSS书。全剧终，谢谢！

转载于:https://www.cnblogs.com/stone-lyl/p/6582283.html