css怎么让一个段落居中,css让一个div绝对居中

css让一个div绝对居中

方法1

/* css */

html,body{

height: 100%;

}

body{

margin: 0;

background-color: bisque;

position: relative;

}

div{

background-color: aqua;

width: 80px;

height: 200px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -40px;

margin-top: -100px;

}

该方法利用css中父相子绝,让div根据body来进行定位(不加 position: relative;相对定位的话,默认也会相对body来进行定位). left: 50%; top: 50%;会使该div左上角在页面中间.加上 margin-left: -40px; margin-top: -100px;就形成了绝对居中. 该方法适用于宽高都确定的情况下

方法2

/* css */

html,

body {

height: 100%;

}

body {

margin: 0;

background-color: bisque;

position: relative;

}

div {

background-color: aqua;

width: 80px;

height: 200px;

position: absolute;

left: 0;

top: 0;

bottom: 0;

right: 0;

margin: auto;

}

该方法是将元素完全脱离文档流使用margin: auto;将div上下,左右都完全居中;

方法3

/* css */

html,

body {

height: 100%;

}

body {

margin: 0;

background-color: bisque;

display: flex;

justify-content: center;

align-items: center;

}

div {

background-color: aqua;

width: 80px;

height: 200px;

}

该方法利用的css3的弹性盒子使横轴以及纵轴都达到了居中的效果 IE10及其以下版本都不兼容

方法4

/* css */

html,

body {

height: 100%;

}

body {

margin: 0;

background-color: bisque;

position: relative;

}

div {

background-color: aqua;

width: 80px;

height: 200px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

该方法利用的css3中 transform属性中translate(-50%, -50%)进行的一个2D的转换,达到了居中的效果

IE10及其以下版本都不兼容

方法5

/* css */

body {

margin: 0;

background-color: bisque;

width: 2000px;

height: 1000px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

div {

background-color: aqua;

width: 80px;

height: 200px;

display: inline-block;

}

该方法利用文本居中,(不常用).而且必须要有绝对的宽和高百分比的宽高也不可以

方法6

// 基本样式的设定

// box代表div

box.style.width = '80px'

box.style.height = '200px'

box.style.background = ' aqua'

document.body.style.position = 'relative'

document.body.style.background = 'bisque'

let htm = document.documentElement

let htmWidth = htm.clientWidth

let htmHeight = htm.clientHeight

let boxW = box.clientWidth

let boxH = box.clientHeight

box.style.position = 'absolute'

box.style.left = (htmWidth-boxW)/2 +'px'

box.style.top =( htmHeight-boxH)/2 +'px'

该方法也是用的绝对定位，利用js算出left，和top的精确值，绝对定位到页面的中间