多种方式让你的容器水平居中

方法一:position加margin(兼容性:主流浏览器均支持,IE6不支持) 最容易让人理解也是最常见的一种方法

<div class="box">
    <div class="center"></div>
</div>

  

/**css**/
.box {
    width: 600px;
    height: 600px;
    background: #000;
    position: relative;
.center {
    position: absolute;
    width: 100px;
    height: 100px;
    background: orange;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  margin: auto;
}

  另外一种margin+position

<div class="box">
    <div class="center"></div>
</div>
/**css**/
.box {
    width: 600px;
    height: 600px;
    background: #000;
    position: relative;
.center {
    position: absolute;
    width: 100px;
    height: 100px;
    background: orange;
    left: 50%;
    top: 50%;
    margin-left:-50px;    margin-top:-50px;
}

方法二:position加 transform(兼容性:ie9以下不支持 transform,手机端较好。)

/* css */
.box {
    position: relative;
    background:#ccc;
    width: 600px;
    height: 600px;}

.center {
    position: absolute;
    background: green;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 100px;
    height: 100px;
}

 方法三:display:flex;margin:auto 

/* css */
.box {
    background: yellow;
    width: 600px;
    height: 600px;
    display: flex;
}

.center {
    background: green;
    width: 100px;
    height: 100px;
    margin: auto;
}

  方法四:不固定宽高(IE67不支持)

.box {
    background: yellow;
    width: 600px;
    height: 600px;
}
.content {  left:50%;  transform:translateX(-50%);  display:table-cell;//容器变单元格  vertical-align:middle;//单元格居中}

  方法五:类似于方法四

/*css*/
.box{
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.center{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background: green;
}

方法六:纯position

/* css */
.box {
    background: yellow;
    width: 200px;
    height: 200px;
    position: relative;
}

.center {
    background: green;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px; 

}

  方法七:flex;align-items: center;justify-content: center

.box {
    background: yellow;
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center {
    background: green;
    width: 100px;
    height: 100px;
}

  居中的方式网上会有很多种方法,熟练其中的一两种也就够用了。

移动端建议大家使用方法四和七不固定宽高,效果还是非常不错的;

pc端的话比较建议大家用纯position因为要考虑低版本浏览器兼容问题嘛。希望对你们有所帮助!

  

时间: 11-05

多种方式让你的容器水平居中的相关文章

多种方式垂直水平居中

1. 不需要知道父容器和子容器的具体尺寸 (1)方法一:margin <div class="wrapper"> <div class="content"></div> </div> .wrapper { display: table-cell; width: 500px; height: 500px; text-align: center; /*水平居中*/ border: 1px solid #eee; verti

Spring学习总结(一)——Spring实现IoC的多种方式

控制反转IoC(Inversion of Control),是一种设计思想,DI(依赖注入)是实现IoC的一种方法,也有人认为DI只是IoC的另一种说法.没有IoC的程序中我们使用面向对象编程对象的创建与对象间的依赖关系完全硬编码在程序中,对象的创建由程序自己控制,控制反转后将对象的创建转移给第三方,个人认为所谓控制反转就是:获得依赖对象的方式反转了. IoC是Spring框架的核心内容,使用多种方式完美的实现了IoC,可以使用XML配置,也可以使用注解,新版本的Spring也可以零配置实现Io

Android进阶——构建UI布局的多种方式总结

引言 作为Android App,给人第一印象的就是用户界面(UI),简洁友好的UI,自然会给用户优秀的体验,自然很容易就得到用户的认可和赞许,这样App才变得真正的有价值.所以作为开发App的第一步,UI尤为重要,构建UI有很多种方式:xml静态布局.java动态代码.HTML构建(借助WebView)和第三方开源框架等. 一.构成UI的基本元素--View和ViewGroup概述 在Android中绝大部分的UI组件都是存放在android.widget包及其子包.android.view包

Android入门——构建UI布局的多种方式

引言 作为Android App,给人第一印象的就是用户界面(UI),简洁友好的UI,自然会给用户优秀的体验,自然很容易就得到用户的认可和赞许,这样App才变得真正的有价值.所以作为开发App的第一步,UI尤为重要,构建UI有很多种方式:xml静态布局.java动态代码.HTML构建(借助WebView)和第三方开源框架等. 一.构成UI的基本元素--View和ViewGroup概述 在Android中绝大部分的UI组件都是存放在android.widget包及其子包.android.view包

使用docker创建静态网站应用-多种方式

原文:使用docker创建静态网站应用-多种方式 能承载静态网站的服务器有很多,本文使用,nginx.apache.tomcat服务器演示docker静态网站应用设置 一,创建docker文件, 不同服务器的docker文件不一样,下面分别创建nginx.apache.tomcat三个服务器的docker文件,其实主要就是区别于FROM标签于项目文件目录 目录结构褥子: 1,nginx 的 docker文件 FROM nginx COPY ./www /usr/share/nginx/html/

myeclipse安装svn插件的多种方式

开发者服务评测征文 十万现金悬赏大神 方法一:在线安装 1.打开HELP->MyEclipse Configuration Center.切换到SoftWare标签页. 2.点击Add Site 打开对话框,在对话框Name输入Svn,URL中输入:http://subclipse.tigris.org/update_1.6.x3.在左边栏中找到Personal Site中找到SVN展开.将Core SVNKit Library和Optional JNALibrary添加(右键Add to Pr

android 设置字体颜色、EditText自动输入转换成大写字母的多种方式

在TextView上面设置某一个字的字体颜色为指定颜色时,可以通过java类SpannableString类和Html语言来实现. (一)SpannableString类方式 private void setText(TextView t){ String text = t.getText().toString().trim(); SpannableString span = new SpannableString(text); span.setSpan(new ForegroundColorS

从注册流程 分析如何安全退出多个Activity 多种方式(附DEMO)

前言 由于一个同学问到我如何按照一个流程走好之后回到首页,我以前看到过4个解决方案,后来发现有做个记录和总结的必要,就写了这篇博文.(之前看小强也写过一篇,这里通过自身的分析完整的总结一下以下6种方案,并加上一个DEMO便于大家了解大体流程) 在android的用户交互中,按钮触发的意图(Intent)跳转会为你重新打开新的一个界面活动(Activity),对于之前的界面根据需求进行摧毁(Finish())或则保留. 如果一个交互流程中,是从A开始,按照A - B - C - D - A这样的顺

shell实战:多种方式实现获取列内容

自己不是专业的linux,平时工作中也不用linux编程,自学一些linux shell编程,忘了学,学了忘,效率不高.今天权当复习吧. 想想这样一个情景吧,获取某一行的部分列值. 考虑这样的输入:"root:x:0:0:root:/root:/bin/bash",现在我们获取用户及shell信息.自己暂时想到的5种实现方式. #!/bin/bash ############################################## #第二种实现 普通循环 #########