网页布局各种居中问题的详解

水平居中

行内元素水平居中

div{
  text-align: center;
}

块级元素水平居中

div{
  margin: 0 auto;
}

多个块级元素水平居中

解决方法之一：

<div class="wrap">
        <div class="center-box">
            <h1>1</h1>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
        </div>
        <div class="center-box">
            <h1>2</h1>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
        </div>
        <div class="center-box">
            <h1>3</h1>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
        </div>
</div>

.wrap{
    text-align: center;
}

.center-box{
    background-color: #e0e0e0;
    display: inline-block;
    text-align: left;
}

解决方法之二：

<div class="wrap">
        <div class="center-box">
            <h1>1</h1>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
        </div>
        <div class="center-box">
            <h1>2</h1>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
        </div>
        <div class="center-box">
            <h1>3</h1>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
        </div>
</div>

.wrap{
    display:flex;
    justify-content:center;
}

垂直居中

单行行内元素垂直居中

方法之一：

div p{
  padding: 30px 0;
}

方法之二:

div{
  line-height: 30px;
}

多行行内元素垂直居中

应用场景:外围div高度固定
方法之一:

<div class="container">
    <div class="table-container">
        <span>这里是文字</span>
        <span>这里是文字</span>
        <span>这里是文字</span>
        <span>这里是文字</span>
        <span>这里是文字</span>
    </div>
</div>

.container{
    width: 200px;
    background-color: #f2dede;
    margin-top: 50px;
}
.table-container{
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}

方法之二应用场景:在可以使用flex布局的情况下

<div class="wrap">
        <div class="center-box">
            <h1>1</h1>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
            <p>不定长的文字</p>
        </div>
</div>

.wrap{
    display:flex;
    flex-direction: column;
    justify-content:center;
    height: 100vh;
}

方法之三:

<div class="container ghost-center">
    <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>

.container{
    width: 200px;
    background-color: #f2dede;
    margin-top: 50px;
}
.ghost-center{
    height: 200px;
    position: relative;
}
.ghost-center::before{
    content: " ";
    display: inline-block;
    width: 1%;
    height: 100%;
    vertical-align: middle;
}
.ghost-center p{
  /*宽度务必要计算准确哦！*/
    width: 190px;
    vertical-align: middle;
    display: inline-block;
    margin: 0;
}

块级元素垂直居中

方法之一应用场景：块级元素高度固定

<div class="container parent">
    <div class="child">

    </div>
</div>

.container{
    width: 200px;
    background-color: #f2dede;
    margin-top: 50px;
}
.parent{
    height: 200px;
    position: relative;
    background-color: lightgrey;
}
.child{
    width: 100%;
    height: 100px;
    position: absolute;
    margin-top: -50px;
    top: 50%;
    background-color: lightblue;
}

方法之二应用场景: 块级元素高度不固定

<div class="container parent">
    <div class="child">

    </div>
</div>

.container{
    width: 200px;
    background-color: #f2dede;
    margin-top: 50px;
}
.parent{
    height: 200px;
    position: relative;
    background-color: lightgrey;
}
.child{
    width: 100%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    background-color: lightblue;
}

方法之三应用场景:可以使用flex布局的情况

<div class="container parent">
    <div class="child">

    </div>
</div>

.container{
    width: 200px;
    background-color: #f2dede;
    margin-top: 50px;
}
.parent{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

绝对居中

高度宽度都固定

<div class="container parent">
    <div class="child">

    </div>
</div>

.container{
    width: 200px;
    height: 200px;
    background-color: #f2dede;
    margin-top: 50px;
}
.parent{
  position: relative;
}
.child{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  background-color: lightblue;
}

高度宽度不固定

<div class="container parent">
    <div class="child">

    </div>
</div>

.container{
    width: 200px;
    height: 200px;
    background-color: #f2dede;
    margin-top: 50px;
}
.parent{
  position: relative;
}
.child{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: lightblue;
}

使用flex布局

<div class="container parent">
    <div class="child">

    </div>
</div>

.container{
    width: 200px;
    height: 200px;
    background-color: #f2dede;
    margin-top: 50px;
}
.parent{
  display: flex;
  justify-content: center;
  align-items: center;
}