About using css to center text and images vertically and horizontally

About using css to implement text and imagesVertical and horizontal centering

##I have always believed that a good memory is not as good as a bad writing. Recently, I have encountered a lot of vertical centering. I will sort it out for future reference.

1. Center the text vertically and horizontally

1. Center the text horizontally:

There is nothing to say about horizontally centering text. It can be easily achieved by using text-align: center;.

---

2. Vertical centering:

1) Simple single line text　

　Use line-height==height to make single line text Centered vertically.

1 <p>
2     垂直水平居中
3 </p>

1 p{
2     width: 200px;
3     height: 200px
4     text-align: center;
5     line-height: 200px;
6     background:#1AFF00;7 }

Simply put, just use the p tag, like this

<p>垂直水平居中</p>

##

1 p{
2     width: 200px;
3     height: 200px;
4     text-align: center;
5     line-height: 200px;
6     background:#00ABFF;7 
}

The effect is as follows:

​​ ##Attributes of elements, block-level parent elements

display

: table;Inline elements

display: table-cell;

---

vertical-align

: mid

dl

e; (inline)

1 <p>国际《儿童权利公约》界定的儿童系指18岁以下的任何人
3 </p>

 1 p{ 
 2     width: 200px; 
 3     height: 200px; 
 4     display: table; 
 5     background:#1AFF00; 
 6 } 
 7 span{ 
 8     display: table-cell; 
 9     vertical-align: middle;10 }

(block level)

1 <p>
2     </p><p>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</p>
3 

Positioning+transform: translateY(-50% ); ##

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background: #00ABFF; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 50%;
 10     left: 0;
 11     width: 200px;
 12     height: 64px;
 13     transform: translateY(-50%);14 }

Positioning+marginnegative value

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background:#1AFF00; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 50%;
 10     left: 0;
 11     width: 200px;
 12     height: 64px;
 13     margin-top: -32px;
 14 }

Positioning+margin: auto;

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background:#00ABFF; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 0;
 10     left: 0;
 11     right: 0;
 12     bottom: 0;
 13     margin: auto;
 14     width: 200px;
 15     height: 64px;
 16 }

Two Both have fixed width and fixed height, and the parent element uses the

padding

value, which is the height of the parent element minus half the height of the child element

 1 p{ 
 2     width: 200px; 
 3     height: 64px; 
 4     padding: 68px 0; 
 5     background:#1AFF00; 
 6 } 
 7 p{ 
 8     width: 200px; 
 9     height: 64px;
 10 }

Elements use overflow: hidden; (css hack) child elements use margin value. This value is the height of the parent element minus half of the height of the child element.

p{
    width: 200px;
    height: 200px;
    overflow: hidden;
    background:#00ABFF;
}
p{
    width: 200px;
    height: 64px;
    margin:68px auto;
}

The effect is as follows:

　

##2. Center the image vertically and horizontally

1. Horizontal centering

---

　

1) img is inline-block in the initial setting of css, inline Block element, if you want to center it horizontally, use text-align:center;

　

2) Set display:block; for the img element to convert it to a block-level element. To center horizontally, use margin:0 auto;

2. Center vertically

　 1.jpg

---

　

Use this picture as a demonstration

1 <p>
2     <img  src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" alt="About using css to center text and images vertically and horizontally" >
3 </p>

Line-height==height vertical-align: middle;

p{
    width: 198px;
    height: 198px;
    text-align: center;
    line-height: 198px;
    border: 1px solid #8900FF;
}
img{
    vertical-align: middle;
}

display: table-cell;vertical-align: middle;

p{
    display: table-cell;
    vertical-align: middle;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    display: block;
    margin: 0 auto;
}

display: table-cell;vertical-align: middle; text-align: center;

p{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}

Positioning+display: block;transform: translate(-50%,-50%);

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: block;
}

Positioning+margin negative value

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
}

　　定位+margin: auto;

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

　　 overflow: hidden;margin值

p{
    width: 198px;
    height: 198px;
    overflow: hidden;
    border: 1px solid #8900FF;
}
img{ 8     margin: 25px;
}

　　padding值

 p{
 2     padding: 25px;
 3     width: 148px;
 4     height: 148px;
 5     border: 1px solid #8900FF;
 6 }

　　用table的属性+vertical-align: middle;实现

1 <p>2     <span><img src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy"  alt=""  /></span>3 </p>

p{
    display: table;
    width: 198px;
    height: 198px;
    text-align: center;
    border: 1px solid #8900FF;
}
span{
    display:table-cell;
    vertical-align: middle;
}

　　用background实现

1 <p></p>

1 p{
2     width: 198px;
3     height: 198px;
4     border: 1px dashed #8900FF;
5     background: url(1.jpg) no-repeat center center;
6 }

　　效果如下：

　　

 原文来自：http://www.cnblogs.com/Ni-F/p/6937931.html 感谢作者分享！

The above is the detailed content of About using css to center text and images vertically and horizontally. For more information, please follow other related articles on the PHP Chinese website!