一、水平居中
1、行内元素的水平居中方法
给父元素设置一个text-align:centent。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .box{ text-align: center; } </style> <body> <div class="box"></div> </body> </html>
2、 确定宽度的块级元素水平居中
设置外边距，margin：0 auto;
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .box{ width: 400px; height: 400px; background: red; margin: 0 auto; } </style> <body> <div class="box"> </div> </body> </html>
3、负外边距
创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。然后，将容器的左外边距值设置为负的容器宽度的一半。这 样即可将该容器固定在页面水平方向的中点。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .box{ width:400px; height:400px; background:red; position:absolute; left:50%; margin-left:-200px; } </style> <body> <div class="box"> </div> </body> </html>
二、垂直居中
1、使用line-height
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .box{ background: red; line-height: 50px; } </style> <body> <div class="box">Text here</div> </body> </html>
2、margin
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .box{ background: red; width: 400px; height:400px; } .logo{ width: 200px; height: 200px; margin-top: 100px; } </style> <body> <div class="box"> <img class="logo" src="images/logo.jpg" alt=""/> </div> </body> </html>
3、vertical-align
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .box{ display:table; } .div { display:table-cell; vertical-align:middle; background: red ;height: 100px } </style> <body> <div class="box"> <div class="div"> <p> vertical-align </p> </div> </div> </body> </html>
4、position:absolute;
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .box{ width: 400px; height: 400px; background: red; position: relative; } .div{ position:absolute; top:50%; width: 200px; height:200px; margin-top:-100px; background: green; } </style> <body> <div class="box"> <div class="div"></div> </div> </body> </html>
5.position:absolute
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .box{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%; background: red; } </style> <body> <div class="box"></div> </body> </html>
6、在 content 元素外插入一个 div
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .box{ height:50%; float:left; background: red; margin-bottom:-100px; } .div { clear:both; width: 200px; height:200px; background: green; position:relative; } </style> <body> <div class="box"></div> <div class="div"></div> </body> </html>
7、padding
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .box{ padding: 20px; background: red; } </style> <body> <div class="box"> padding </div> </body> </html>