水平居中、垂直居中、水平垂直居中

水平居中

块级元素

• margin: 0 auto;

行内元素和行内块元素

• 给其父元素添加 text-align:center ;即可

垂直居中

单行文字

• line-height: 40px;,40px为容器盒子高度

图片文字

img {
    /* vertical-align: bottom; */
    /* 让图片和文字垂直居中 */
    vertical-align: middle;
    /* vertical-align: top; */
}
textarea {
    vertical-align: middle;
}

<img src="images/ldh.jpg" alt="">  刘德华，华仔
<br>
<textarea name="" id="" cols="30" rows="10"></textarea> 请您留言

水平垂直居中

盒子水平垂直居中

绝对定位法+margin

.box {
    position: absolute;
    /* 1. left 走 50%  父容器宽度的一半 */
    left: 50%;
    /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    width: 200px;
    height: 200px;
    background-color: pink;
}

  <div class="box"></div>

绝对定位法+transform

div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 1. 我们tranlate里面的参数是可以用 % */
    /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
    /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
    /* transform: translateX(50%); */
}
p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    /* margin-top: -100px;
    margin-left: -100px; */
    /* translate(-50%, -50%)  盒子往上走自己高度的一半   */
    transform: translate(-50%, -50%);
}
span {
    /* translate 对于行内元素是无效的 */
    transform: translate(300px, 300px);
}

<div>
    <p></p>
</div>
<span>123</span>