Important style attributes to use Display,vertical-align
Vertical-align:middle This property is a function of centering the table element vertically, and if you want to use the IMG element, note the following display settings
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="Text/css"> . Main{ width: px; height: px; background-color: #aaa; display: table; / * Parent Element Set Table properties * / text-align: center; } . Main span{ display: table-cell; /*img Set as Table element properties */vertical-align: Middle; / * This property will work after two display settings * / } </style></head><body> <div class="main"> <span><img src="1.jpg" alt="/" width="150px"> </span> </div></body></html>The same approach applies to IMG, just change the child to IMG, no longer need span
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="Text/css"> . Main{ width: px; height: px; background-color: #aaa; position: relative; } . Child{ width: px ; height: px ; background-color: rgb (.) ; position: Absolute ; margin: auto ;Left : 0 ;Right : 0 ; top: 0 ; Bottom: 0 ;} </style></head><body> <div class="main"> <div class="Child"></div> </div></body></html>Center horizontally, if text (inline Element) Text-align:center,div (block-level element) margin:0 auto;, so I don't write horizontal center, don't think I'm lazy oh
Iv. using the CSS3 attribute transform.main{/*给父容器设置*/display:flex;align-items:center;/*所有子元素都垂直居中了*/}
transform: translateY(50%);/*给子元素设置*/
V. Vertical centering of single-line textThe advantages of all vertical centering above: it is not necessary to know the size of the parent element and child elements, then the following method needs to know the size, but is not bad, some places may be very convenient to use, to see the situation in your project
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Test</title> <style type="Text/css"> . Block{ height: px; background-color: blue; line-height: px; /* values are the same height as the parent element */ text-align: center; } </style></head><body> <div class="Block">Single-line text vertically centered</div></body></html>Vii. Summary/*省略了尺寸的设置，侧重了重点，读者可以把部分内容加上*/ .main{/*父元素*/ position: relative; } .child{/*子元素*/ position: absolute; top: 50%; left: 50%; margin-left: /*负的自身宽度一半*/ margin-top: /*负的自身高度一半*/ }
The above six methods of compatibility I do not have one by one tests, if the reader has a good opinion, I hope you come forward, thank you
Six ways to achieve vertical and horizontal centering of elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
