CSS兩種水平垂直居中示例介紹
發(fā)布時間：2013-09-16 15:12:46 作者：佚名 
我要評論
我要評論水平垂直居中在css中的應(yīng)用想必大家已經(jīng)很熟悉。盡管如此，在本文也要為大家介紹兩種不錯的實現(xiàn)方法，如果你想鞏固一下，那還是值得一看的
第一種：將固定大小的div框相對窗口水平垂直居中，改變?yōu)g覽器窗口大小時，依然保持水平垂直居中；
<!doctype html>
<html lang="en">
<head>
<title>水平垂直居中</title>
<meta charset="utf-8">
<style type="text/css">
.out{width: 0px;
height: 0px;
position: absolute;
left: 50%;
top: 50%;
}
.in{height: 300px;
width: 300px;
position: absolute;
left: -150px;
top: -150px;
background-color: #999;
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>
第二種：讓一個自適應(yīng)大小的div相對瀏覽器窗口水平垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>自適應(yīng)劇中</title>
<style type="text/css">
.middle{
height: 300px;
width: 300px;
border: 1px solid;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.in{
background-color: red;
height: auto;
width: auto;
min-width: 0px;
min-height: 0px;
display: inline;
}
</style>
</head>
<body>
<div class="middle">
<div class="in">內(nèi)容自適應(yīng)水平垂直居中</div>
</div>
</body>
</html>
復(fù)制代碼
代碼如下:<!doctype html>
<html lang="en">
<head>
<title>水平垂直居中</title>
<meta charset="utf-8">
<style type="text/css">
.out{width: 0px;
height: 0px;
position: absolute;
left: 50%;
top: 50%;
}
.in{height: 300px;
width: 300px;
position: absolute;
left: -150px;
top: -150px;
background-color: #999;
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>
第二種：讓一個自適應(yīng)大小的div相對瀏覽器窗口水平垂直居中
復(fù)制代碼
代碼如下:<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>自適應(yīng)劇中</title>
<style type="text/css">
.middle{
height: 300px;
width: 300px;
border: 1px solid;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.in{
background-color: red;
height: auto;
width: auto;
min-width: 0px;
min-height: 0px;
display: inline;
}
</style>
</head>
<body>
<div class="middle">
<div class="in">內(nèi)容自適應(yīng)水平垂直居中</div>
</div>
</body>
</html>
相關(guān)文章
css實現(xiàn)元素水平垂直居中常見的兩種方式實例詳解
這篇文章主要給大家介紹了css實現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對大家的學(xué)習(xí)或者工作具有一定的參考價值，有需要的朋友們下面來2017-04-23- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
- 這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-17
利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12Flexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例
下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-27html元素水平居中、垂直居中、水平垂直居中于其父級元素的方法
這篇文章主要介紹了html元素 水平居中、垂直居中、水平垂直居中于其父級元素的方法,需要的朋友可以參考下2014-04-08- 在制作Web頁面時都有碰到CSS制作水平垂直居中，我想大家都有研究過或者寫過，平時工作收集了幾種不同的方式制作垂直居中方法，但每種方法各有千秋在此與大家分享或許對初學(xué)2013-09-06
- 寬度自適應(yīng)：就是元素的寬度根居里面的內(nèi)容來變化2012-06-14
- 本文給大家分享CSS 垂直水平居中的5種最佳解決方案以及各自的優(yōu)缺點，本文給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友參考下吧2018-01-11