浮层java_css保持浮层水平垂直居中的四种方法

以以上代码为例：

1，flex方法

.parent{

position: absolute;

background-color: #eee;

width: 100%;

height: 100%;

}

.parent .children{

background-color: #751;

width: 200px;

height: 200px;

position: absolute;

top: 50%;

left: 50%;

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

}

2,利用绝对定位与transform

.parent{

position: absolute;

background-color: #eee;

width: 100%;

height: 100%;

}

.parent .children{

background-color: #751;

width: 200px;

height: 200px;

position: absolute;

top: 50%;

left: 50%;

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

}

3,将父元素定位，子元素绝对定位，利用margin负值为子元素宽高一半来实现

.parent{

position: relative;

background-color: #eee;

height: 600px;

width: 100%;

}

.parent .children{

background-color: #751;

width: 200px;

height: 200px;

position: absolute;

top: 50%;

left: 50%;

margin: -100px 0 0 -100px;

}

4利用定位与margin：auto

.parent{

width: 100%;

height: 37.5rem/* 600px */;

background: #09c;

position: relative;

}

.children{

width: 100px;

height: 100px;

background-color: #eee;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

}

浮层java_css保持浮层水平垂直居中的四种方法相关推荐

css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法文章目录学习笔记(一) 前言一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四二.flex布局法 1.方法五三.将小div转成行内块 ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
CSS：实现多行文本垂直居中的四种方法
对于单行文本,可以使用行高等于高度来设置垂直居中,但多行文本不适用. 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现将父元素设置为块级表格来显示,再将 ...
HTML水平垂直居中的四种方式
第一种方式是使用margin进行移动水平居中 margin:0 auto; <!DOCTYPE html> <html lang="en"> <he ...
前端：水平垂直居中的10种方法
第一种: 通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%:left:50%, 但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的 ...
CSS常用水平垂直居中的几种方法
CSS水平垂直居中一.利用margin:auto 二.利用position: absolute 三.弹性盒子四.利用水平对齐和行高五.grid 为方便理解,欢迎查看线上效果,在线试一试一.利用 ...
CSS实现水平垂直居中的五种方法
前言今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法. 方法一:margin:auto 子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种 ...

浮层java_css保持浮层水平垂直居中的四种方法

浮层java_css保持浮层水平垂直居中的四种方法相关推荐

最新文章

热门文章