css實(shí)現(xiàn)元素水平垂直居中常見(jiàn)的兩種方式實(shí)例詳解
發(fā)布時(shí)間：2017-04-23 17:00:04 作者：xionggen 
我要評(píng)論
我要評(píng)論這篇文章主要給大家介紹了css實(shí)現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值，有需要的朋友們下面來(lái)一起看看吧。
一、父元素的flex布局實(shí)現(xiàn)元素的水平垂直居中
示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent{
display:flex;
display:-webkit-flex;
justify-content: center;
align-items: center;
width:100%;
height: 200px;
background-color: #c43;
}
.child{
width:300px;
height:100px;
background-color: #c4235b;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
效果圖如下：
二、絕對(duì)定位&負(fù)margin值實(shí)現(xiàn)元素水平垂直居中
注意：元素本身需要確定寬度和高度
示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:300px;
height:100px;
background-color: #873cac;
position:absolute;
top:50%;
left:50%;
margin-left: -150px;
margin-top:-50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果圖如下：
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了css實(shí)現(xiàn)元素垂直居中顯示的7種方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-09-04CSS實(shí)現(xiàn)子元素div水平垂直居中的示例
這篇文章主要介紹了CSS實(shí)現(xiàn)子元素div水平垂直居中的示例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2020-09-03
這篇文章主要介紹了css 不定寬高的元素居中布局解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2019-09-18
CSS自適應(yīng)布局實(shí)現(xiàn)子元素項(xiàng)目整體居中，內(nèi)部項(xiàng)目左對(duì)齊
這篇文章主要介紹了CSS自適應(yīng)布局實(shí)現(xiàn)子元素項(xiàng)目整體居中，內(nèi)部項(xiàng)目左對(duì)齊，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們2019-09-03- 這篇文章主要介紹了css常用元素水平垂直居中方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2019-08-09
css實(shí)現(xiàn)元素垂直居中的常用方法(總結(jié))
本文給大家分享幾種方法介紹css實(shí)現(xiàn)元素垂直居中的常用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-01- 在 CSS 中要設(shè)置元素水平垂直居中是一個(gè)非常常見(jiàn)的需求了。這篇文章主要介紹了CSS實(shí)現(xiàn)元素居中原理解析，本文分別從行內(nèi)元素和塊級(jí)元素進(jìn)行說(shuō)明，具有一定的參考價(jià)值，感興2018-10-18
- 作為前端攻城師，在制作Web頁(yè)面時(shí)都有碰到CSS制作水平垂直居中，我想大家都有研究過(guò)或者寫過(guò)，特別的其中的垂直居中，更是讓人煩惱，下面這篇文章主要給大家匯總介紹了關(guān)于2017-09-12
關(guān)于css 行元素和塊元素 相互轉(zhuǎn)換 居中
下面小編就為大家?guī)?lái)一篇關(guān)于css 行元素和塊元素 相互轉(zhuǎn)換 居中。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-05
