欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html元素水平居中、垂直居中、水平垂直居中于其父級元素的方法

  發(fā)布時間：2014-04-08 15:29:48   作者：佚名   我要評論
這篇文章主要介紹了html元素 水平居中、垂直居中、水平垂直居中于其父級元素的方法,需要的朋友可以參考下
html元素 水平居中 于 其父級元素的方法：

方法1：

復(fù)制代碼
代碼如下:

<div class="wrap">
<div class="left-right-middle1">左右居中方法1</div>
</div>


復(fù)制代碼
代碼如下:

html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.left-right-middle1{
width:200px;
background-color:#69F;
margin:0 auto;
}

方法2：

復(fù)制代碼
代碼如下:

<div class="wrap">
<div class="left-right-middle2">左右居中方法2</div>
</div>


復(fù)制代碼
代碼如下:

html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.left-right-middle2{
width:200px;
background-color:#69F;
left:50%;
margin-left:-100px;
}

html元素 垂直居中 于 其父級元素的方法：

復(fù)制代碼
代碼如下:

<div class="wrap">
<div class="top-bottom-middle">上下居中</div>
</div>


復(fù)制代碼
代碼如下:

html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.top-bottom-middle{
height:200px;
background-color:#69F;
top:50%;
margin-top:-100px;
}

html元素 水平垂直居中 于 其父級元素的方法：

方法1：

復(fù)制代碼
代碼如下:

<div class="wrap">
<div class="all-middle1">上下左右居中方法1</div>
</div>


復(fù)制代碼
代碼如下:

html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.all-middle1{
width:200px;
height:200px;
background-color:#69F;
top:50%;
margin:-100px auto 0;
}

方法2：

復(fù)制代碼
代碼如下:

<div class="wrap">
<div class="all-middle2">上下左右居中方法2</div>
</div>


復(fù)制代碼
代碼如下:

html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.all-middle2{
width:200px;
height:200px;
background-color:#69F;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

完整代碼：

復(fù)制代碼
代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>Div Middle</title>
<style type="text/css">
html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.left-right-middle1{
width:200px;
background-color:#69F;
margin:0 auto;
}
.left-right-middle2{
width:200px;
background-color:#69F;
left:50%;
margin-left:-100px;
}
.top-bottom-middle{
height:200px;
background-color:#69F;
top:50%;
margin-top:-100px;
}
.all-middle1{
width:200px;
height:200px;
background-color:#69F;
top:50%;
margin:-100px auto 0;
}
.all-middle2{
width:200px;
height:200px;
background-color:#69F;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left-right-middle1">左右居中方法1</div>
</div>
<div class="wrap">
<div class="left-right-middle2">左右居中方法2</div>
</div>
<div class="wrap">
<div class="top-bottom-middle">上下居中</div>
</div>
<div class="wrap">
<div class="all-middle1">上下左右居中方法1</div>
</div>
<div class="wrap">
<div class="all-middle2">上下左右居中方法2</div>
</div>
</body>
</html>

效果圖：

相關(guān)文章

  • css 不定寬高的元素居中布局解決方案

    這篇文章主要介紹了css 不定寬高的元素居中布局解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2019-09-18

  • CSS實(shí)現(xiàn)元素居中原理解析

    在 CSS 中要設(shè)置元素水平垂直居中是一個非常常見的需求了。這篇文章主要介紹了CSS實(shí)現(xiàn)元素居中原理解析，本文分別從行內(nèi)元素和塊級元素進(jìn)行說明，具有一定的參考價值，感興
    2018-10-18

  • 淺談css元素居中

    下面小編就為大家?guī)硪黄獪\談css元素居中。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-19

  • CSS元素居中布局的簡單方法

    這篇文章主要介紹了CSS元素居中布局的簡單方法,文中介紹了內(nèi)嵌元素和塊元素以及行內(nèi)塊三種情況,需要的朋友可以參考下
    2015-07-18

  • CSS實(shí)現(xiàn)定位元素居中的方法

    這篇文章主要介紹了CSS實(shí)現(xiàn)定位元素居中的方法,主要涉及到transform和margin的使用,需要的朋友可以參考下
    2015-06-23

  • css控制div中元素居中的示例

    這篇文章主要介紹了css控制div中元素居中的示例,需要的朋友可以參考下
    2014-04-07

  • css實(shí)現(xiàn)元素居中的N種方法

    這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02

最新評論