html/css使文字图片div在整个网页上居中（水平居中+垂直居中）transform属性配置

在使用html/css编写网页时，有时需要让一段文字或图片等在整个网页居中，即既是水平居中又是垂直居中，而单单使用 text-align:center 只是让文字在水平上居中，而无法在垂直方向上也居中：

<!DOCTYPE html>
<head><style>.word{font-size: 50px;text-align: center;}</style>
</head>
<body><div class="word">Hello world！</div>
</body>
</html>

所以这里提出一种实现方法

在该div（文字、图片等）的CSS样式语句中加入以下属性的配置：

position: absolute;

top: 50%;

left: 50%;

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

如果有的因为浏览器兼容问题而无法显示的，可以按需加上各不同浏览器的标识：

-webkit-transform: translate(-50%, -50%); ——> safari、chrome浏览器
-moz-transform: translate(-50%, -50%); ——> firefox浏览器
-ms-transform: translate(-50%, -50%); ——> ie浏览器
-o-transform: translate(-50%, -50%); ——> opera浏览器

以上面的代码为例，修改后的代码如下：

<!DOCTYPE html>
<head><style>.word{font-size: 50px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}</style>
</head>
<body><div class="word">Hello world！</div>
</body>
</html>

这样一来就可以实现在网页上居中啦~

效果如下图所示：

html/css使文字图片div在整个网页上居中（水平居中+垂直居中）transform属性配置相关推荐

css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
css文字在div中,[html][css]让文字在div中居中的方法[转]
转至:http://dreamweaver.abang.com/od/divcss/a/vertical-align.htm 一.行高(line-height)法如果要垂直居中的只有一行或几个文字, ...
用CSS让文字居于div的底部
css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...
CSS 使文字纵向排列的七种方
下面分享一下使文字纵排列的几种方法: 第一种方法:"<br>"标签 <h1> N E T T U T S </h1> 这种方法没有说服力,不推荐 ...
css使背景图片旋转
因为遇到问题所以去查找问题,css3使背景图片旋转的问题. -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); trans ...
html5文字图片垂直居中代码,css实现文字图片垂直居中效果
复制代码代码如下: 轻松实现:垂直居中文字图片 html{ font-size:12px; } .control{ width:600px; border:1px solid #000; paddin ...
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本(文字)内容属于行内元素行内元素水平垂直居中方法方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
如何利用css使PNG图片透明
或许这本来是一个很简单的问题,虽然偶主营业务不是CSS,也学习了一下,权做积累:如下代码来实现png的透明 <style type="text/css"> #yes { ...
html如何让字体自动变色,CSS使文字部分变色
思路思路很简单,就是一个字写两遍,一个字只显示部分,不过不能真的把一个字写两遍.这里就需要用到CSS伪元素:before和:after,记住这个"伪元素"的"伪&quo ...

html/css使文字图片div在整个网页上居中（水平居中+垂直居中）transform属性配置

html/css使文字图片div在整个网页上居中（水平居中+垂直居中）transform属性配置相关推荐

最新文章

热门文章