css正确居中方法,CSS居中方法

css居中方法非常多，根据工作的实际情况采用恰当方法，可取到事半功倍的效果。

就常见的一些居中方法整理如下：

代码如下：

　　　　

前端开发

如果.con1在知道宽和高的情况下要使其居中，可以采用如下方法：

单纯的垂直居中：margin：0 auto；(前提是对.con1设置了固定宽度且宽度小于父元素宽度)；

既垂直居中也水平居中：.con{position:relative;}

.con1{

width:300px;

height:300px;

position:absolute;

top:50%;

left:50%;

margin-left:-150px;

margin-top:-150px;

}

使.con1里面的图片居中的方法：.con1{

height：300px;

line-heigth:300px;

}

.con1 img{vertical-align:middle}

使.con1里面的文字居中的方法：只使用.con1{

height：300px;

line-heigth:300px;

}就够了；

万能的居中方法：

方法一：

.con{position:relative;}

.con1{

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

}

方法二：

.con{position:relative;}

.con1{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

-webkit-transform:translate(-50%,-50%);

-moz-transform:translate(-50%,-50%);

-o-transform:translate(-50%,-50%);

}

Flexbox布局下的水平垂直居中方法：

.con{

justify-content:center;

align-items:center;

display:-webkit-flex;

}

CSS 居中方法集锦

记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line-height 1.4 p ...

CSS居中方法搜集

转自这里:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/ 兼容低版本IE的方法 html使用表格结构 背景 ...

css居中方法与双飞翼布局

居中 类型 方法 对应属性 水平 垂直 水平&垂直 1.父元素使用外边距自动 2.子元素显示行内块级元素,写入内容,父元素设置文本居中 3.给父元素开启非绝对和固定定位作为子元素开启绝对定位的 ...

css居中方法小结

水平居中 行内元素 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 块状元素 当被设置元素为 块状元素 时用 text-align: ...

css居中方法详解

水平居中: 通过设置父元素,让子元素内容居中:text-align:center; 通过设置子元素本身,让子元素居中:margin:0 auto; 以上方法生效的前提条件是子元素没有被float元素影 ...

css 居中方法

垂直居中 利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的. .ghost-center { po ...

CSS中各种各样居中方法的总结

在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...

CSS居中的方法整合--水平居中

原文 CSS的居中问题,是一个老生常谈的问题,各种居中方法层出不穷.是水平居中还是垂直居中?是block还是inline? 居中对象是一个还是多个?长度宽度是否确定?等等各种因素确定. 这里就从这些方 ...

随机推荐

使用Ajax异步加载页面时，怎样调试该页面的Js

前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...

RBStoryboardLink库的使用注意事项 -转载至--坤哥MartinLi博客

RBStoryboardLink库的使用注意事项 demo下载:https://github.com/MartinLi841538513/RBStoryboardLinkDemo 操作步骤: 1,引入 ...

Linux性能检测命令 - vmstat

一.vmstat命令描述 最常见的Linux/Unix监控工具想必是vmstat了,vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可以展现给定时间间隔的服务 ...

Spring面试问答

1.什么是Spring框架?Spring框架有哪些主要模块? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台.Spring帮助开发者解决了开发中基础性的问题, ...

Echarts折线图点击事件

MySQL学习笔记：新增一列

1.在一个已建好的表中,最后一列位置添加一列,可使用: ALTER TABLE aa_numbers_small ADD COLUMN date_time DATE NOT NULL; 2.添加一列到 ...

iOS开发之--为PCH文件添加绝对路径

要想设置PCH的相对路径,首先我们需要去查看绝对路径. 相对路径 点击PCH文件,Xcode的右侧会显示PCH的属性.这里我们可以获取到PCH的绝对路径.从工程的路径开始,前面使用$(SRCROOT) ...

c语言实践 1/1-1/2+1/3-1/4+...

其实这个题目和上面那个是一样的 /* 1/1-1/2+1/3-1/4+...1/n; */ int n = 1; double sum = 0; double frac = 0; int i = 1; ...

Jackson是线程安全的吗

网上说是线程安全的,内部代码用了ThreadLocal.Synchronized这些线程安全类和关键字,可以放心的用. 避免每次使用都new一个,全局配置一个ObjectManager的对象将大大减少 ...

对数据进行GZIP压缩和解压

public class GzipUtils { /** * 对字符串进行gzip压缩 * @param data * @return * @throws IOException */ public ...