# 常见居中布局

# 水平居中

# 行内元素

1、首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;

<div id="father">
    <span id="son">行内元素</span>
</div>

#father {
    width: 500px;
    height: 300px;
    text-align: center;
}

2、如果父元素不是块级元素，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

<span id="father">
    <span id="son">行内元素</span>
</span>

#father {
    display: block;
    width: 500px;
    height: 300px;
    text-align: center;
}

# 块级元素

# 1、子元素定宽

<div id="father">
    <div id="son">块级元素水平居中</div>
</div>

#father {
    width: 500px;
    height: 300px;
}
#son {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

# 2、子元素不定宽

TIP

默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

<div id="father">
    <div id="son">我是块级元素</div>
</div>

#father {
    width: 500px;
    height: 300px;
    background-color: skyblue;
    text-align: center;
}
#son {
    background-color: green;
    display: inline;
    /* 或display: inline-block */
}

注意

将#son转换成行内元素，内容的高度撑起了#son的高度，设置高度无用

# 使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

1、子元素定宽 设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

<div id="father">
    <div id="son">块级元素</div>
</div>

#father {
    width: 500px;
    height: 300px;
    position: relative;
}
 
#son {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    /* 或者 transform: translateX(-50%);*/
}

2、子元素不定宽 利用css3新增属性transform: translateX(-50%);

# 弹性布局

给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

# 垂直居中

# 单行行内元素

设置单行行内元素的"行高等于盒子的高"即可

<div id="father">
    <span id="son">单行的行内元素</span>
</div>

#father {
    width: 500px;
    height: 300px;
    background-color: skyblue;
}
#son {
    background-color: green;
    line-height: 300px;
}

# 多行行内元素

使用给父元素设置display:table-cell;和vertical-align: middle;属性即可；

#father {
    width: 500px;
    height: 300px;
    display: table-cell;
    vertical-align:middle;
}
#son {
    background-color: green;
}

<div id="father">
    <span id="son">花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风景要远观，才能美好；有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。</span>
</div>

# 块级元素

# 使用定位使块级元素垂直居中

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

#father{
    position:relative;
}
#son{
    position:absolute;
    top:50%;
    margin-top:-元素的高度;
    /* 或者 transform: translateY(-50%); */
}

# 使用弹性布局

给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

#father{
    display: flex;
    align-items: center;
}

# 水平垂直居中

# 已知高度和宽度的元素

1、设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

#father {
    width: 500px;
    height: 300px;
    position: relative;
} 
#son {
    width: 100px;
    height: 100px;
    background-color: green;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

1、设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

  #father {
    width: 500px;
    height: 300px;
    position: relative;
}
 
#son {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

# 未知高度和宽度的元素

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

#father {
    width: 500px;
    height: 300px;
    position: relative;
}
#son {
    background-color: green;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    /* 简写： transform: translate(-50%,-50%); */
}

# 使用flex布局实现

设置父元素为flex定位，justify-content: center; align-items: center;

#father {
    width: 500px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
#son {
    background-color: green;
}

← Flex 弹性布局圣杯布局 →