【HTML+CSS】水平垂直居中

元素水平垂直居中

方法一: 使用marign自我计算像素

• 知道父元素的宽高设置marign外边距
• 父元素宽\高减去子元素宽\高, 除以2就是左右外边距和上下外边距的值
• 注意子元素设置marign-top会外边距溢出, 需使用overflow: hidden

<style>
        .father{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            overflow: hidden;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* margin-left: 50px; */
            /* margin-top: 50px; */
            margin: 50px auto;
        }
</style>
<div class="father">
        <div class="son"></div>
</div>

方法二: 使用padding和怪异盒模型

<style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
            padding-top: 100px;
            padding-left: 100px;
            box-sizing: border-box;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
</style>
    <div class="father">
        <div class="son">
        </div>
    </div>

方法三: 定位

需要知道子元素的宽高

1. 子绝父相
2. 子{ top: 50%; left: 50%}
3. 回调 marign-top: 减去自身高度的一半;marign-left: 减去自身宽度的一半;

<style>
        .father{
            width: 400px;
            height: 300px;
            background-color: aquamarine;
            position: relative;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            /* 50%只是左上角的点移动到中间 
             所以需要回调子元素自身宽高的一半*/
            top: calc(50% - 100px);
            left: calc(50% - 150px);
        }
</style>
<div class="father">
        <div class="son"></div>
</div>

方法四: 佳佳瞎扯方法

元素有默认的偏移值(老师瞎扯的)
不需要知道父子元素的宽高, 但是子元素必须设置宽高

1. 子绝父相
2. 子{top: 0;left: 0; right: 0;bottom: 0; margin: auto;}

<style>
        .father{
            width: 400px;
            height: 300px;
            background-color: aquamarine;
            position: relative;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
  <div class="father">
        <div class="son"></div>
  </div>
</style>

方法五: 佳佳瞎扯方法加强版

<style>
    .box{
            width: 300px;
            height: 200px;
            background-color: skyblue;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
</style>
<div class="box"></div>