目錄
- 方法一：使用flex布局
- 方法二：使用transform將元素進行移動，必要時可將margin設為負值（需要知道元素的尺寸）
- 方法三：通過改變父元素和子元素的position屬性實作居中效果
- 方法四：子元素設定display: inline-block，父元素設定text-align: center且line-height等于height
- 寫在最后
方法一：使用flex布局
將父元素的display屬性設為flex、justify-content和align-items屬性都設為center，可以讓子元素在父元素內水平垂直居中顯示，如果希望父元素覆寫整個瀏覽器視口，可以將父元素的高設定為100vh、寬設定為100vw（css3規定1vh等于視口高度的1%、1vw等于視口寬度的1%），這樣子元素就會顯示在頁面的正中間，
示例
<body>
<div id="parent">
<div id="children"></div>
</div>
<style>
body{
margin: 0;
padding: 0;
}
#parent{
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
background-color: #999;
}
#children{
width: 50px;
height: 50px;
background-color: red;
}
</style>
</body>
圖1-子元素在父元素內水平垂直居中
<style>
body{
margin: 0;
padding: 0;
}
#parent{
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #999;
}
#children{
width: 50px;
height: 50px;
background-color: red;
}
</style>
圖2-子元素在整個頁面內水平垂直居中
方法二：使用transform將元素進行移動，必要時可將margin設為負值（需要知道元素的尺寸）
通過transform屬性的translate方法將子元素進行移動，這需要事先知道子元素和父元素的尺寸以計算出移動的距離，必要時（例如父元素與子元素寬高的單位不同不方便計算時）可以將子元素的margin設為負值，讓子元素向左和向上方各移動其本身寬高的一半，
示例
<style>
body{
margin: 0;
padding: 0;
}
#parent{
width: 500px;
height: 500px;
background-color: #999;
}
#children{
width: 50px;
height: 50px;
background-color: red;
transform: translate(225px,225px);
}
</style>
圖3-已知父元素和子元素的具體尺寸，可以通過計算將子元素移動一定的距離使其恰好在父元素內水平垂直居中
<style>
body{
margin: 0;
padding: 0;
}
#parent{
width: 100vw;
height: 100vh;
background-color: #999;
overflow: hidden;
}
#children{
width: 50px;
height: 50px;
background-color: red;
transform: translate(50vw,50vh);
margin-top: -25px;
margin-left: -25px;
}
</style>
圖4-父元素的寬高單位是vw和vh，只用transform進行移動的話不方便計算移動的距離，可以先移動50vw和50vh，再將子元素的margin設為負值實作水平垂直居中（給第一個子元素加margin-top，父元素會跟著移動，所以要在父元素上加上overflow: hidden，具體可參考我的另一篇博客：https://www.cnblogs.com/ljxlijiaxin/p/14297565.html）
方法三：通過改變父元素和子元素的position屬性實作居中效果
給父元素設定一個不為默認值的position屬性，再將子元素的position屬性設為fixed或absolute，然后將子元素的top、bottom、left、right屬性都設為0，同時margin設為auto；或者將子元素的top、bottom、left、right屬性都設為50%，不需要設定margin: auto，給子元素加上transform: translate(-50%,-50%)即可，這兩種寫法都能實作子元素在父元素內水平垂直居中，
示例
<style>
body{
margin: 0;
padding: 0;
}
#parent{
width: 100vw;
height: 100vh;
background-color: #999;
position: relative;
}
#children{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<style>
body{
margin: 0;
padding: 0;
}
#parent{
width: 100vw;
height: 100vh;
background-color: #999;
position: relative;
}
#children{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
transform: translate(-50%,-50%);
}
</style>
圖5-上述兩種寫法都能實作子元素水平垂直居中
方法四：子元素設定display: inline-block，父元素設定text-align: center且line-height等于height
將子元素設為行內塊元素，父元素設定左右居中，同時通過讓父元素的line-height屬性等于height屬性實作子元素上下居中，
示例
<style>
body{
margin: 0;
padding: 0;
}
#parent{
width: 100vw;
height: 100vh;
line-height: 100vh;
background-color: #999;
text-align: center;
}
#children{
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
}
</style>
圖6-將父元素的width設為100vw、height和line-height設為100vh，同樣可以讓子元素在頁面上水平垂直居中
寫在最后
以上為全部內容，感謝閱讀，
本博文僅為學習記錄和分享交流，如有錯漏，還請幫忙指出，也歡迎更多補充，不勝感激，
CSDN地址：https://blog.csdn.net/m0_53610112.
GitHub地址：https://github.com/ljxlijiaxin.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/261686.html
標籤：其他
上一篇：[javascript] 解決移動端手機瀏覽器軟鍵盤遮擋輸入框問題
下一篇：教你玩轉CSS 下拉選單