CSS3元素居中詳解

admin發表於2018-01-12
CSSS3

非CSS3的元素居中效果實現可以參閱CSS 設定div居中效果一章節。

利用CSS3實現居中效果更為簡單，下面分別做一下介紹。

一.tranform方式：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
html,body {
  height:100%;
  margin:0px;
  padding:0px;
}
div{
  position: absolute;
  top: 50%;
  left: 50%;
  width:200px;
  height:100px;
  background:blue;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

通過絕對定位設定div的left和top屬性值分別為50%，這樣就實現div左上角居中效果。

然後再通過tranform將元素分別向上和向左移動對應方位尺寸的一半，這樣就實現div中心點居中效果。

相關閱讀：

（1）.絕對定位參閱CSS position:absolute 絕對定位一章節。

（2）.tranform參閱CSS3 transform一章節。

二.flex彈性佈局：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
html,body {
  height:100%;
  margin:0px;
  padding:0px;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
div{
  width:200px;
  height:100px;
  background:blue;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

使用彈性佈局更為簡單，這裡不多介紹，更多內容參閱相關閱讀。

相關閱讀：

（1）.display: flex參閱display:flex彈性佈局一章節。

（2）.justify-content參閱CSS3 justify-content一章節。

（3）.align-items參閱CSS3 align-items一章節。

相關文章