xinbiancheng.cn

CSS水平居中+垂直居中+水平/垂直居中的方法

解答如下：

水平居中精讲视频

1，水平居中

1.1 行内元素 1.2 块级元素 

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

<style>
    #father {
        width: 500px;
        height: 300px;
        background‐color: skyblue;
        text‐align: center;
       }
</style>
 
<div id="father">
    <span id="son">我是行内元素</span>
</div>

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

<style>
    #father {
        display: block;
        width: 500px;
        height: 300px;
        background‐color: skyblue;
        text‐align: center;
       }
</style>
 
<span id="father">
    <span id="son">我是行内元素</span>
</span>

2，垂直居中

1.1 单行的行内元素 1.2 多行的行内元素 1.3 块级元素

3,水平垂直居中

3.1已知高度和宽度的元素 3.2未知高度和宽度的元素