绝对定位水平垂直居中（HTML、CSS）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位水平垂直居中</title><style>.box {position: absolute;/*   1.left 走50% 父容器宽度的一半 */left: 50%;/*  2、margin 负值  往左边走 自己盒子宽度的一半 */margin-left: -100px;/*   以上是水平居中 */top: 50%;margin-top: -100px;/*    以上是垂直居中 */width: 200px;height: 200px;background-color: skyblue;}</style>
</head><body><div class="box"></div>
</body></html>

绝对定位水平垂直居中（HTML、CSS）相关推荐

CSS中实现水平/垂直居中
CSS中实现水平/垂直居中在CSS中实现水平居中相对简单,但是却没有一个明确的属性表示这是实现垂直居中的,这就导致垂直居中的实现相对初学者来说难上许多.但是在实际的开发中垂直居中的需求常常出现,例如 ...
js、css分别实现元素水平垂直居中
js实现元素水平垂直居中.css实现元素水平垂直居中 css实现元素水平垂直居中[4行代码] js实现元素水平垂直居中[弄巧成拙] css实现元素水平垂直居中[4行代码] #div{top:50%;l ...
CSS display: table-cell 用于水平垂直居中
CSS display: table-cell 用于水平垂直居中在 CSS 设置居中时候,水平和垂直居中的设置略有不同,通常我们使用 text-align:center 对图片.文字等行内元素(in ...
如何在 CSS 中设置组件在浏览器屏幕水平垂直居中
如何在 CSS 中设置组件在浏览器屏幕水平垂直居中在 CSS 中设置组件在浏览器屏幕水平垂直居中可分解为两个问题,一是设置组件在其父组件的水平垂直居中,二是让其父组件铺满整个屏幕. 对于让最 ...
【CSS】CSS实现水平垂直居中
文章目录 1. 绝对定位元素的水平居中 2. margin: auto:绝对定位 3. css3.0弹性盒子布局 4. 相对定位 5. vertical-align:middle 6. display ...
如何让一个div水平垂直居中
在工作中经常会碰到让一个div框针对某个模块水平垂直居中针对这种情况有多种方法现在一一实现一下一. div绝对定位水平垂直居中 margin 负间距代码: .box {width: 200 ...
实现div中的div水平垂直居中
方法一利用transform实现div居中,要先设置定位 css .outer {width: 500px;height: 200px;background-color: green;positio ...
H5 水平居中水平垂直居中
Tips:元素一般分为块级元素和行内元素块级元素可以设置高度,宽度,行内元素则不能,如果将行内元素变成行内块元素就可以设置宽高了,只需要将 display 属性设置为 inline-block ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...

绝对定位水平垂直居中（HTML、CSS）

绝对定位水平垂直居中（HTML、CSS）

绝对定位水平垂直居中（HTML、CSS）相关推荐

最新文章

热门文章