css盒子居中
方法1(margin: 0 auto)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css浮动盒子居中</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background: #fffccc;
text-align: center;
} .box{
background-color: red;
display: inline-block; } </style>
</head>
<body> <div class="box">
我是浮动的盒子 我要居中
</div>
</body>
</html>
方法2(inline_block)
body{
background: #fffccc;
}
.box{
background-color: red;
width: 30%;
margin: 0 auto;
}
方法三（flew）
body {
background: #fffccc;
display: flex;
justify-content: center;
height: 300px;
}
.box {
background-color: red;
width: 30%;
margin: 0 auto;
}
盒子要有高度不然其高度与父级一致
方法四 （浮动或者定位)
body {
background: #fffccc;
height: 300px;
}
.box {
background-color: red;
width: 30%;
float: left;
margin-left: 50%;
transform: translateX(-50%);
}
）
css盒子居中的更多相关文章
- css盒子居中定位问题
在HTML中,div盒子的居中要通过外边距margin和width来控制,首先确定盒子的宽度,然后确定盒子方位并将其平移便可使盒子移到固定位置. <div id="divpic&quo ...
- CSS——盒子居中显示
嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...
- 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之盒子居中的方法
一.盒子垂直居中的方法 1.先让盒子的上下边缘和父盒子的水平中心线重叠,,然后再让子盒子往回移动自身一半的距离 <div class="father"> // 结构 & ...
- 《Web开发中让盒子居中的几种方法》
一.记录下几种盒子居中的方法: 1.0.margin固定宽高居中: 2.0.负margin居中: 3.0.绝对定位居中: 4.0.table-cell居中: 5.0.flex居中: 6.0.trans ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- CSS盒子模型（Box Model）
一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...
随机推荐
- 通过网页发布ios应用。
原文地址:http://www.zhihu.com/question/24304345 两种方法: 1. 测试版本 支持任何类型的开发者帐号,需要在developer后台设置授权deviceID,可以 ...
- 20169219 SEED SQL注入实验
实验环境SEED Ubuntu镜像 环境配置 实验需要三样东西,Firefox.apache.phpBB2(镜像中已有): 1.运行Apache Server:只需运行命令sudo service a ...
- Entity Framework快速入门--直接修改（简要介绍ObjectContext处理机制）
在介绍Entity Framework的修改实体到数据库的方法之前呢,我们先简要的介绍一下ObjectContext的处理机制. 1.ObjectContext的处理机制 ObjectContext是 ...
- asp.net 设置分页
private const int PAGESIZE = 5; //定义每页有五行数据 private void FillPageList() { int pageCount = 0; // page ...
- Ubuntu 14.04.3 LTS如何安装谷歌输入法
谷歌输入法项目主页:https://code.google.com/p/scim-googlepinyin/ 一,打开Ubuntu 的“Ubunru的软件中心”,在搜索里面输入“googlepinyi ...
- Educational Codeforces Round 61 (Rated for Div. 2) G(线段树，单调栈)
#include<bits/stdc++.h>using namespace std;int st[1000007];int top;int s[1000007],t[1000007];i ...
- django开发日志配置
做django开发离不开 日志,这用于保存我门的服务器的日志信息,便于开发人员的维护. 直接上代码: 在setting.py文件里直接配置即可 LOGGING = { 'version': 1, 'd ...
- 【bzoj4036】[HAOI2015]按位或 fmt+期望
Description 刚开始你有一个数字0,每一秒钟你会随机选择一个[0,2^n-1]的数字,与你手上的数字进行或(c++,c的|,pascal 的or)操作.选择数字i的概率是p[i].保证0&l ...
- 【Es】jest操作elasticsearch
https://blog.csdn.net/niuchenliang524/article/details/82869319 操作es的客房端有多个,在此例出三种(具体区别自行百度),本文讲的是jes ...
- Flink学习笔记：Operators之Process Function
本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...