块级元素水平，垂直居中的两种方式
方式一： 利用margin
<!DOCTYPE html><html> <head> <title>块级元素水平，垂直居中</title> <meta charset="utf-8"> <style> .wrapper { height: 600px; border: 1px solid gray; } .box { width: 100px; height: 100px; background: gold; margin: 250px auto 0; } </style> </head> <body> <div > <div ></div> </div> </body></html>
方式二，利用定位及负边距
<!DOCTYPE html><html> <head> <title>块级元素水平，垂直居中</title> <meta charset="utf-8"> <style> .wrapper { height: 600px; border: 1px solid gray; position: relative; } .box { width: 100px; height: 100px; background: gold; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } </style> </head> <body> <div > <div ></div> </div> </body></html>
TAG:
