CSS——盒子居中显示
嵌套中个的子盒子使用了绝对定位，父盒子使用了相对定位。那么子盒子如何居中显示：
1、距离左偏离50%
2、margin-right子盒子宽度的一半
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box1 {
height: 200px;
background-color: aliceblue;
position: relative;
} .box2 {
width: 900px;
height: 40px;
background-color: red;
position: absolute;
bottom:0px;
left: 50%;
margin-left: -450px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
效果：
CSS——盒子居中显示的更多相关文章
- CSS文本居中显示
因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...
- css盒子居中
方法1(margin: 0 auto)<!DOCTYPE html> <html lang="en"> <head> <meta char ...
- css div居中显示的4种写法
Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...
- css盒子居中定位问题
在HTML中,div盒子的居中要通过外边距margin和width来控制,首先确定盒子的宽度,然后确定盒子方位并将其平移便可使盒子移到固定位置. <div id="divpic&quo ...
- CSS盒子居中的常用的几种方法
第一种: 用css的position属性 <style type="text/css"> .div1 { width: 100px; height: 100px; bo ...
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- CSS基础之居中显示
这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...
- css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)
1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div 设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...
- CSS盒子模型中（）是透明的，这部分可以显示背景()
CSS盒子模型中()是透明的,这部分可以显示背景() border margin padding content 我的理解: · Margin(外边距) - 清除边框外的区域,外边距是透明 ...
随机推荐
- codeforces gym 100357 H (DP 高精度）
题目大意 有r*s张扑克牌,数字从1到 r,每种数字有s种颜色. 询问对于所有随机的d张牌,能选出c张组成顺子的概率和组成同花的概率. 解题分析 对于组成顺子的概率,令dp[i][j][k]表示一共选 ...
- Ubuntu 16.04安装VLC播放器，替代系统默认播放器
VLC播放器应该说是开源项目中最好的视频播放器,但功能不止于视频播放,还有视频直播等等.可以通过安装字幕插件搜索字母等. 安装步骤: 1.安装: sudo add-apt-repository ppa ...
- FreeMarker与Spring MVC 4集合的HelloWorld示例
0.整体的项目结构 1.引入POM <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...
- OSX: node中安装zeromq
1. brew install pkg-config2. brew install zmq3. export PKG_CONFIG_PATH="/usr/local/lib/pkgconfi ...
- [JavaEE] JTA, Java Transaction API, Repository for DB opreations
Mainly two things: 1. For all the creating and deleting opreations for the DB, we want to use 'REQUI ...
- ssh2项目整合 struts2.1+hibernate3.3+spring3 基于hibernate注解和struts2注解
项目文件夹结构例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW9uZ3poaWFu/font/5a6L5L2T/fontsize/400/fi ...
- 一个unity3d lightmap问题
上周美术同学在使用unity3d制作lightmap的过程中,发现部分被lightmap影响的模型在移动端上效果与pc端不一致.当时我大概看了下,分析后,得到一个结论是“在移动端上lightmap的h ...
- Erlang下与其他程序和语言的通信机制（3）
这部分主要聊C Nodes.首先我们需要了解下Erlang的分布式系统: 分布式Erlang: 分布式Erlang是由一组相互通信的Erlang运行时组成,其中每一个运行时称为一个Node.不同Nod ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- chosen.jquery.js 使用笔记
using chosen.jquery.js using chosen.jquery.css html: <label for="MeetingUsersList" clas ...