vertical center content_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-29 19:55 出处：网络

i have one div and some text inside it. to make my content horizontally and vertically center i use a css. it works fine in firefox but content not being vertically center when test the following code

相关专题：css

so please guide me what i need add or change in my css.

my html code is

<html>
<head>
<title>Vertical Centering</title>
<style>
.content {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background-color: green;
  height: 200px;
  width: 250px;

}
</style开发者_Go百科>
</head>
<body>
<div class="content">
Hello.
</div>
</body>
</html>

please have look at my css and tell me why it is not working in IE also please rectify my css in such a way as a result it should look same in all the browser.

thanks

you can wrap your text with a span and then set position:relative and top:45%;

 .content span {
    position:relative;
    top:48%;    
}

live example: http://jsbin.com/ovabo4/3

Here you will find a great guide: Vertical centering with CSS

A good method is to do this, so it is always exactly in the middle (only works if you have a fixed height div)

<div class="centered"></div>

html, body{height: 100%;}
.centered{height: 500px; width: 500px; position: relative; top: 50%; margin-top: -250px; /* Just use a negative margin that is half the height of your element */