如何在容器内的div中将div居中？

Question

I'm using the Materialize CSS front end framework and using margin: 0 auto; as I always have, and having a nightmare getting this div centered within its parent. What gives?

 .outer { border: 1px solid red; height:100px; } .inner{ border: 1px solid black; height:50px; margin: 0px auto; } 

 <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> <div class="container"> <div class="row outer"> <div class="col l6 inner"> </div> </div> </div> 

http://codepen.io/kinsdotnet/pen/mEYJVg

Answer 1

Materialise uses a grid system that floats elements. You can't use margin: auto on a floated element.

You'll need to either use offset classes form the grid, or rearrange the grid and that child element...

( http://codepen.io/jmsherry/pen/OXYVRL <-- like that)

Also, don't listen to the really bad advice of !important and Absolute positioning. There are better ways to do this...

Answer 2

Absolute inside Relative

Set the position of the outer div to relative, the inner to absolute.

To make margin: 0px auto work, add left: 0; right:0; left: 0; right:0;

Also you must specify width to the inner div.

if you want to center vertically,

just replace:

margin: 0px auto

with:

margin: auto

Result:

 .outer { border: 1px solid red; height:100px; position:relative; } .inner{ border: 1px solid black; height:50px; margin: 0px auto; width:100px; position:absolute; left:0; right:0; } 

 <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> <div class="container"> <div class="row outer"> <div class="col l6 inner"> </div> </div> </div> 

Answer 3

Try adding this to your inner class:

float:none !important;

it looks like the class col applies a float left, and that's why it doesn't center