让元素居中

    废话不多说，直接看代码：

.center{
    position:absolute;
    top:50%;
    left:50%;
    -moz-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}

这段代码有兼容性，如果浏览器不支持css3将会达不到预想的效果，但是现在大多数浏览器都已经支持。

时间： 2024-08-04 05:02:12

让元素居中的相关文章

不定宽块状元素居中3

通过给父元素设置float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中. 我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐:而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中. <s

元素居中问题

一.浮动元素居中知道宽高 div{ width: 100px; height: 100px; background-color: red; float: left; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } 2.不知道宽高 div{ background-color: red; float: left; position: absolute; bottom: 0; left

CSS元素居中

html中元素分为行内元素和块级元素.采用margin或者float来使元素居中,是比较常见的方法. margin:0 auto只能用于块级元素,不能使行内元素居中. 参考知乎上为什么「margin:auto」可以让块级元素水平居中?,margin:0 auto,是左右外边距自适应,水平方向的 auto,其计算值取决于可用空间(剩余空间).元素本身为块级元素,那么水平方向可用空间的距离为其包含盒的宽度(宽度=盒总宽度-(padding-left+padding-right+border-left

不定宽块状元素居中方法

在实际的编写代码过程中,我们会遇到要为"不定宽块状元素"设置居中,比如网页上的分页导航,因为分页的数量不确定,所以我们不能通过设置宽度来限制它的弹性. 不定宽的块状元素有三种方法设置居中: 一.设置table标签: 利用table标签的自适应长度(table其长度根据其文本内容的长度决定),因此可以看做是"定宽度块元素",然后利用顶宽度块状元素居中的margin方法,使其水平居中. 例1:HTML代码 1 <!DOCTYPE html PUBLIC "

使定位元素居中的4种方法例举

例子: 创建两个div,定位父级'box' 和定位元素'sun'.本文要做的是 'sun' 要在 'box' 中居中显示, 该怎么做呢? 定位前效果图: 定位元素居中后的效果图: HTML代码:  <div id="box">  <div id="sun"></div> </div> 样式代码: <style type="t

行内元素和块级元素居中

内联元素水平居中 1.行内元素居中:设置text-align:center; 2.flex布局:设置display:flex;justify-content:center; 垂直居中父元素高度是单行文本:设置height=line-height; 父元素确定的是多行文本:a:插入table, 然后设置vertical-align:middle; b:先设置display:table-cell;然后设置vertical-align:middle; 块级元素水平居中 1.定宽块级元素:设置左右

元素居中之Flex布局

在做页面布局的时候,多多少少都会遇到这个话题,如何使子元素居中于父元素中??? 对于这个问题,方法多种多样,之前也有对这个问题进行总结过,answer应该不少于10种吧.至于使用哪种方法比较好,我觉得这很大程度看个人喜好. 我经常使用的最多也就是一下几种:(以最简单的结构举例,元素宽高略 ) <div class='parent'> <div class=''child></div> </div> 1.定位 .parent{ position:relativ

CSS如何让浮动导航栏元素居中显示

CSS如何让浮动导航栏元素居中显示:制作导航栏是最为基础的布局技能之一,当然对于稍有经验的人员来说没有任何问题,不过对于初学者可能会有一定的困扰.普通的导航栏一般具有一下几个特点,整个导航栏居中,导航栏目具有,并且能够均匀分布,下面就是一个这样的简单代码实例.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author"

照片与同行元素居中的方法

1.照片与同行元素居中的方法:将同行元素和照片同时设置vertical-align:middle; <html><head> <title></title> <style type="text/css"> img{ vertical-align:middle; } span{ vertical-align: middle; } </style></head><body> <p>&

浮动元素居中的实现方法~~很不错

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float center</title> <style> .demo { /*最外层容器居中非必要*/ border: 1px solid #CCC; margin: 5px auto; overflow: hidden; width: 143