How to center a text inside a div using javascript

Question

I have a javascript code that generates html to build a bar with css, but I need to center a text in the middle of the bar, this is my code:

                render: function(data, type, row, meta){
                    coord_str = data;
                    return $("<div></div>", {
                        "class": "bar-chart-bar"
                    }).append(function(){
                        var bars = [];
            color = 'blue';                         
                        }                           
                            bars.push($("<div></div>",{
                                "class": "bar " + "bar1"
                            }).css({
                                "background-color": color,
                                "width": coord_str + "%"
                            }))
                        return bars;
                    },"50%").prop("outerHTML")
                }

I would like the text "50%" in the "disk" column to be centered on the bar graph

Can someone help me? It seems something elementary of css but I do not give with the error.

Answer 1

Very easy with Flexbox :

 div { position: relative; width: 200px; height : 40px; display: flex; justify-content: center; align-items: center; border : green solid 2px; } div:before{ content: ""; background: lightblue; position: absolute; top: 0; left: 0; width : 60%; height: 100%; } span{ z-index : 1; } 

 <div> <span>Centered text!</span> </div> 

Answer 2

Ready.

.bar-text {
    z-index-1; 
    position: absolute;  
    width: 100%; 
    text-align: center; 
    margin-top: -2px;
}