CSS 绝对定位 div 水平居中（两种）

html

<div class="test-div"></div>

css

1. 确定宽度

.test-div {display: inline-block;width: 100px;height: 100px;background: red;position:absolute;left: 50%;margin-left: -50px;
}

宽度为 100px，使用 margin-left: -50px 向左偏移 50px

2.不确定宽度

.test-div {display: inline-block;width: 100px;height: 100px;background: red;position:absolute;left: 50%;transform: translateX(-50%);
}

使用 transform: translateX(-50%); 延 X 轴偏移自身的 50%

CSS 绝对定位 div 水平居中（两种）相关推荐

php div 居中代码,用CSS实现DIV水平居中显示
div用css设置居中的方法:首先对body设置"text-align:center":然后对需要居中的div盒子设置css样式为"margin:0 auto" ...
html同一段文字设置不同颜色字体,CSS设置一个文字两种颜色
CSS设置一个文字两种颜色属于前端实例代码,有关更多实例代码大家可以查看. CSS可以将一个文字设置为两种颜色,下面介绍一下如何实现此效果. 代码实例如下: 犀牛前端部落 .antzone{ disp ...
隐藏和显示div的两种方法
隐藏和显示div的两种方法方式一style="visibility: none;"visiblity:visible -------->可见visiblity:hidden ...
css画三角形的两种方法
css画三角形的两种方法画三角形 1 border 2 css的clip-path 画三角形 1 border <div class="left-down-small" / ...
css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
html绝对定位怎么页面居中,css绝对定位如何居中？css绝对定位居中的四种实现方法...
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
css设置div水平居中方法
CSS设置div水平居中的方法: 1.给div元素设置"margin: 0 auto"样式: 2.在父级div元素里设置"text-align: center" ...
【css + echarts】实现两种时钟展示
前言:通过组件和css的样式设计,实现古典钟和电子钟两种样式展示,为你的网站增加活力 1.时钟原理 JS 原生库Date()可以获取当前时间,setInterval()去定时更新时间,从而达到时钟效果 ...
用CSS使DIV水平居中
一,用CSS使DIV层水平居中对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 这样在FF中已经居中了,可是在IE中看 ...

CSS 绝对定位 div 水平居中（两种）

html

css

1. 确定宽度

2.不确定宽度

CSS 绝对定位 div 水平居中（两种）相关推荐

最新文章

热门文章