CSS replacement for

Question

I know this question has been asked many times, but I never saw a satisfactory answer. I mean, an answer that actually works.

So, here we go again. Take this jsFiddl

Answer 1

    margin: 0 auto; 
    text-align: center;

Above Code might not be working when you are using bootstrap grids. Here is the quick solution for this using bootstrap 4 and IT WORKS IN EVERY BROWSERS

<div class="row">
  <div class="col-sm-2">
     <div class="customClass mx-auto">
         <p class="text-center"> your text goes here </p>
     </div>
  </div>
</div

you can put any column like col-sm-2, 3, 4.......12

Replacement for Center tag in different situations

1. text-center Works with p, a, button, h tags and more i.e all the tags containing data or text directly

2. Flex It can used to align complete element inside another element, however it has more utilities check documentation for reference

Use can center elements using flex in following manners

display:flex;
justify-content:center;
align-items:center;

Another import property is flex-direction i.e

flex-direction:column
flex-direction:row

Use flex direction according to the type of alignment you want

3. mx-auto (bootstrap class)

Answer 2

div { width: 400px; text-align: center; }
table { display: inline-block; }

This should work. Check example here: http://jsfiddle.net/ye7ngd3q/2/

and if you want elements inside table cell left/right aligned then you can define individual classes and assign to element respectively as show below:

HTML

<div align="center">
   A centered div
   <p>A</p>
   <table border="1">
     <tr><td class="align-left">centered</td><tr>
     <tr><td class="align-right">div</td><tr>
   </table>
   <ul><li>A centered div</li></ul>
</div>

CSS

div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }

Answer 3

The text align center covers most of the text elements but a little extra is needed to centre align the table

div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}

http://jsfiddle.net/NYuv8/4/

Answer 4

You can try and style the table as well, like this:

div {
    width:400px; 
    margin: 0 auto; 
    text-align: center;
}
div table {
  margin: 0 auto;
}

Answer 5

div {width:400px; text-align: center;}
table {display:inline-block;}​

Should work as well in addition to Paul's answer.

http://jsfiddle.net/KFMyn/13/

Answer 6

Why not just leave it <div align="center"> It still works just fine with all browsers as far as I know. I have plenty of old html and I got to this thread only because my NetBeans IDE is warning me this is obsolete. My guess is the browsers are automatically translating to the correct solution. Same thing with <font size="6">bla bla</font> still works just fine and probably automatically converted to <span style="font-size:36px">bla bla</span>