About using css to implement text andimagesVertical 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

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

2 垂直水平居中 3

Copy after login

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

Copy after login

Simply put, just use the p tag, like this

垂直水平居中

Copy after login

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

Copy after login

The effect is as follows:

##Attributes of elements, block-level parent elements

display

: table;Inline elements

display: table-cell;

vertical-align

: mid

e;(inline)

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

Copy after login

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 }

Copy after login

(block level)

国际《儿童权利公约》界定的儿童系指18岁以下的任何人

Copy after login

Positioning+trans form: 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 }

Copy after login

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 }

Copy after login

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 }

Copy after login

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 }

Copy after login

Elements useoverflow: 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; }

Copy after login

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

2 3

Copy after login

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; }

Copy after login

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; }

Copy after login

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; }

Copy after login

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; }

Copy after login

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; }

Copy after login

　　定位+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; }

Copy after login

　　 overflow: hidden;margin值

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

Copy after login

　　padding值

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

Copy after login

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

2 3

Copy after login

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

Copy after login

　　用background实现

Copy after login

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

Copy after login

　　效果如下：

原文来自：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!