如何居中div?
2024-09-02 00:40:04
如何居中div?
水平居中
1 //给div设置一个宽度,然后添加margin:0 auto属性
2
3 div{
4 width:200px;
5 margin:0 auto;
6 }
让绝对定位的div居中
1 div {
2 position: absolute;
3 width: 300px;
4 height: 300px;
5 margin: auto;
6 top: 0;
7 left: 0;
8 bottom: 0;
9 right: 0;
10 background-color: pink; /* 方便看效果 */
11 }
水平垂直居中一
1 //确定容器的宽高 宽500 高 300 的层
2 //设置层的外边距
3
4 div {
5 position: relative; /* 相对定位或绝对定位均可 */
6 width:500px;
7 height:300px;
8 top: 50%;
9 left: 50%;
10 margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
11 background-color: pink; /* 方便看效果 */
12
13 }
水平垂直居中二
1 // 未知容器的宽高,利用 `transform` 属性
2
3 div {
4 position: absolute; /* 相对定位或绝对定位均可 */
5 width:500px;
6 height:300px;
7 top: 50%;
8 left: 50%;
9 transform: translate(-50%, -50%);
10 background-color: pink; /* 方便看效果 */
11
12 }
水平垂直居中三
1 //利用 flex 布局
2 //实际使用时应考虑兼容性
3
4 .container {
5 display: flex;
6 align-items: center; /* 垂直居中 */
7 justify-content: center; /* 水平居中 */
8
9 }
10 .container div {
11 width: 100px;
12 height: 100px;
13 background-color: pink; /* 方便看效果 */
14 }
最新文章
- 【转】理解inode
- VS2010 MFC实现启动画面
- windows下安装xgboost
- php--递归调用
- nyoj 99 单词拼接
- ECMAScript整理笔记(持续更新....)
- Codeforces Round #280 (Div. 2) E. Vanya and Field 数学
- Python学习 之 数据类型(邹琪鲜 milo)
- mycat读写分离
- IE 6/7下自赋值导致 overflow 溢出
- Html 中select标签的边框与右侧倒三角的去除
- (转载)小课堂UI-Star Diamond Tutorial
- C语言初学 使用while语句统计输入字符个数
- ZooKeeper-配置 zoo.cfg
- Oracle数据库中序列(SEQUENCE)的用法详解
- 英语初级学习系列-00-Hello-打招呼
- mac使用influxdb和grafana
- Error running app: Default Activity Not Found
- textbox只允许输入数字
- idea导入eclipse中的maven项目