水準居中、垂直居中、水準垂直居中

水準居中

塊級元素

• 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="">  pink老師是劉德華
<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;
}
           

絕對定位法+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>