當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css布局：块级元素的居中

發布時間：2023/12/2 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 css布局：块级元素的居中小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一.定寬：

1.定位居中(absolute)

方法一：

html: <div class="main"></main> css: .main{width:400px;height:200px;background:#eee;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-100px; }

方法二：

html:<div class="main"></div> css:body {height: 100%; } .main{width: 400px;height: 200px; background:#eee;position:absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto; }

二.非定寬：

1.定位居中(absolute translate)

html:<div class="main">hello world </div> css:.main{background:#eee;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%); }

2.flex布局

html:<body><div class="main"></div></body> css:html,body{width: 100%;height: 100%;display: -webkit-flex;display: flex;justify-content:center;align-items:center; } .container{width: 400px;height: 200px;background: #ccc; }

3.table

html:<body><div class="container"><div class="main"><div class="inner"></div></div></div> </body> css:html,body{height: 100%; } .container{width:100%;height:100%; display: table; } .main {display: table-cell;vertical-align: middle; } .inner{width: 400px;height: 200px;background: #ccc;margin:0 auto; }

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的css布局：块级元素的居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。