腾讯欢乐捕鱼刷金币|腾讯欢乐捕鱼大战技巧
您的位置:首頁> 實例代碼> CSS3實例

flex彈性布局 垂直居中

2019-10-17 11:11| 作者: admin| 查看: 3835| 評論: 0|來自: 螞蟻部落

關于flex彈性布局的基本概念可以參閱display:flex彈性布局一章節。

下面分享一段代碼實例,它實現了讓元素水平垂直居中效果。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.ofucs.tw/" /> 
<title>螞蟻部落</title>
<style>
#box {
  width:500px;
  height:400px;
  background:#ccc;
  display:flex;
  justify-content:center;
  align-items:center;
}
#antzone {
  width:50px;
  height:50px;
  background:green;
}
</style>     
</head>
<body>
<div id="box">
  <div id="antzone"></div>
</div>
</body>
</html>

利用彈性布局實現垂直居中非常簡單,更多內容可以參閱相關閱讀。

相關閱讀:

(1).justify-content參閱justify-content 屬性一章節。

(2).align-items參閱align-items 屬性一章節。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
腾讯欢乐捕鱼刷金币 棒球球具 3d组三3码遗漏 100995中金心水论坛 什么是老时时彩 高级版二肖中特 中三组三最大遗漏 快乐扑克开奖结果查询 竞彩篮球大小分盈利 福彩3d组选六投注技巧 重庆百变王牌概率