CSS样式-不同元素的居中方式

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<title></title>
　　<style type="text/css">
　　/* 这种方式效率更高 */
　　　　body,
　　　　div {
　　　　　　margin: 0;
　　　　　　padding: 0;
　　　　}
 
　　　　body>div {
　　　　　　height: 200px;
　　　　　　border-bottom: 1px solid #000;
　　　　　　/*文字的居中方式-左右居中、上下居中；但是这种方式对块级元素不生效*/
　　　　　　text-align: center;
　　　　　　line-height: 200px;
　　　　}
 
　　　　#hezi {
　　　　　　width: 50px;
　　　　　　height: 50px;
　　　　　　background-color: #f00;
 
　　　　　　/* 经典的块级元素水平居中的办法 */
　　　　　　margin: 0 auto; 
　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<div id="hezi"></div>
　　</div>
　　<div>
　　　　ABCDE
　　</div>
</body>
</html>
posted @ 2021-02-22 15:33  #Friday  阅读(66)  评论(0)    收藏  举报